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

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

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

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

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

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

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

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

Ответ 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.

Ответ 2

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

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

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

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

Удалите overflow: hidden; на .wrap, чтобы узнать, что происходит. Основная идея состоит в том, что .end div перемещается влево внизу в .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 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;
}

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

Удачи!