Усечение CSS-переполнения

Question

Раньше я делал это динамически с использованием JS .. но мы получали некоторые проблемы с производительностью, из которых мы должны были прийти с альтернативным вариантом.

Теперь я усекаю длинный текст в именах моих вкладок, используя стиль переполнения текста.

, но у меня есть небольшая проблема, если кто-то может решить его

В настоящее время это, как мой текст усечение выглядит

Этот текст был Trun ...

Здесь три Точки (...) имеют черный цвет, и я хочу изменить его на красный.

Есть ли способ, которым мы можем достичь этого?

Answer 1

Работы здесь:

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

Код (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; 
} 

Трейлинг точек/эллипсис окрашены в красный цвет, используя этот базовый CSS.

Answer 2

Предполагаете, вы хотите, чтобы точки отображались в красном? К сожалению, это невозможно с помощью простого css. Тем не менее я нашел учебник, который удается сделать пользовательский стиль многоточия, который будет отображаться только тогда, когда это необходимо:

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

Это довольно хороший хак, а не просто объяснить на словах. Может быть, это jsfiddle я только что сделал может помочь вам:

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

Снимите overflow: hidden; на .wrap, чтобы увидеть, что происходит. Основная идея заключается в том, что div .end перемещается влево в .left-side, когда текст переполняется, а когда он не переполняется, он находится в правом нижнем углу .text. Затем div .ellipsis позиционируется абсолютным в относительном .end, поэтому вы, когда вы позиционируете его вправо, видны, когда текст переполняется, и он переполняется, когда текст не переполняется! Смешно, не так ли?

Во всяком случае, вот исходный код:

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; 
} 

Конечно, когда вы собираетесь осуществить это, вы хотите, чтобы удалить все границы и «конец» текста. Я сделал это, чтобы быть понятным примером.Также вы, вероятно, захотите дать обертку position: absolute;, а затем дать ей margin-left: -32px, где ширина равна ширине для .left-side, поэтому ваш текст не будет иметь поля с левой стороны.

Удачи вам!