Cắt ngắn CSS tràn văn bản

Question

Trước đó tôi đã sử dụng nó động JS .. nhưng chúng tôi đã nhận được một số vấn đề về hiệu suất cuz mà chúng tôi phải đi kèm với một tùy chọn thay thế.

Tôi hiện đang cắt ngắn văn bản dài trên tên tab bằng cách sử dụng kiểu tràn văn bản.

nhưng tôi có một vấn đề nhỏ nếu một số ai có thể giải quyết nó

hiện đây là cách cắt ngắn văn bản của tôi trông giống như

Văn bản này đã được trun ...

đây ba dấu chấm (...) có màu đen và tôi muốn thay đổi thành màu đỏ.

Có cách nào để chúng tôi có thể đạt được điều này không?

Answer 1

Làm việc ở đây:

• http://jsfiddle.net/TReRs/4/

Mã (HTML & CSS):

<div class="overme"> 
    how much wood can a woodchuck chuck if a woodchuck could chuck wood? 
</div> 

CSS:

.overme { 
    width: 300px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis; 
    color: red; 
} 

Dấu chấm/dấu chấm lửng được tô màu đỏ bằng cách sử dụng CSS cơ bản đó.

Answer 2

Tôi cho rằng bạn chỉ muốn các chấm xuất hiện màu đỏ? Thật không may điều này là không thể với css đơn giản. Tuy nhiên tôi thấy một hướng dẫn trong đó quản lý để thực hiện một phong cách ellipsis tùy chỉnh, mà sẽ chỉ được hiển thị khi đó là cần thiết:

https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/

Đó là khá một hack thoải mái và không dễ dàng để giải thích bằng lời. Có lẽ jsfiddle này tôi chỉ cần thực hiện có thể giúp bạn:

http://jsfiddle.net/MyUQJ/9/

Tháo overflow: hidden; trên .wrap để xem những gì đang xảy ra. Ý tưởng chính là di chuyển .end div sang dưới cùng bên trái trong .left-side khi văn bản bị tràn, trong khi khi văn bản không tràn, nó nằm ở phía dưới cùng bên phải của .text. Sau đó, div .ellipsis được đặt ở vị trí tuyệt đối bên trong số .end tương đối, vì vậy khi bạn đặt nó sang bên phải, nó sẽ hiển thị khi văn bản bị tràn và nó tràn khi văn bản không tràn! Buồn cười phải không?

Dù sao, đây là mã thô:

HTML:

<div class="wrap"> 
    <div class="left-side"></div> 
    <div class="text"> 
     This is a short story, it 
     doesn't need to be ellipsed. 
    </div> 
    <div class="end"> 
     end 
     <div class="ellipsis">...</div> 
    </div> 
</div> 

<br> 
<br> 
<br> 
<br> 

<div class="wrap"> 
    <div class="left-side"></div> 
    <div class="text"> 
     This is a long story. You won't be able to 
     read the end of this story because it will 
     be to long for the box I'm in. The story is 
     not too interesting though so it's good you 
     don't waste your time on this. 
    </div> 
    <div class="end"> 
     end 
     <div class="ellipsis">...</div> 
    </div> 
</div> 

CSS:

.wrap { 
    height: 100px; 
    width: 234px; 
    border: solid 1px #000; 
    overflow: hidden; 
} 

.left-side { 
    float: left; 
    width: 32px; 
    height: 100px; 
    background: #F00; 
} 

.text { 
    float: right; 
    border: solid 1px #0F0; 
    width: 200px; 
} 

.end { 
    position: relative; 
    float: right; 
    width: 30px; 
    border: solid 1px #00F; 
} 

.ellipsis { 
    position: absolute; 
    top: -25px; 
    left: 198px; 
    background: white; 
    font-weight: bold; 
    color: #F0F; 
} 

Tất nhiên, khi bạn đang gonna thực hiện điều này bạn muốn loại bỏ tất cả các biên giới và văn bản 'kết thúc'. Tôi đã làm điều này trở thành một ví dụ dễ hiểu.Ngoài ra bạn có thể muốn cung cấp cho các bọc một position: absolute; và sau đó cung cấp cho nó margin-left: -32px, nơi chiều rộng là chiều rộng cho .left-side, do đó, văn bản của bạn sẽ không có một lề ở phía bên trái.

Chúc may mắn!