Добавить три точки в многострочном диапазоне

Я нашел этот вопрос здесь на SO, и решение довольно просто:

html:

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look</span>

CSS

span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

И он работает, как и ожидалось, он печатает: Lorem Ipsum is simply du...

Теперь то же самое, что я хотел бы, но продолжаю терпеть неудачу, создайте в следующем примере:

jsfiddle: http://jsfiddle.net/9HRQq/

HTML:

<div class="textContainer">                
    <img src="#" class="image" alt="the_image">
    <span class="text">"The quick brown fox jumps over the lazy dog" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.</span>
</div>

CSS

.textContainer{
    width: 430px;
    float: left;
    margin-top: 10px;
    border: 1px solid black;                
}

.text {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #047F04;
    display: block;
    white-space: normal;
    overflow: hidden !important;
    text-overflow: ellipsis;
    height: 99px;
}

.image {
    float: right;
    position: absolute;
    top: 85px;
    right: 10px;
    width: 108px;
    height: 42px;
}

Не могли бы вы рассказать мне, как я могу достичь, чтобы положить ... в конец строки в моем примере?

Ответ 1

Спецификация для свойства text-overflow говорит, что это невозможно для многострочного текста:

Это свойство указывает рендеринг, когда встроенный контент переполняет свой элемент контейнера блоков ( "блок" ) в своем встроенном направлении прогрессии, который имеет "переполнение, отличное от" видимого. Текст может переполняться, например, когда он не может быть упакован (например, из-за "пробела": nowrap или одно слово слишком длинное для соответствия).

Другими словами, работает только с текстовыми блоками в одной строке.

источник: http://dev.w3.org/csswg/css3-ui/#text-overflow

ИЗМЕНИТЬ Эта скрипта имеет обходное решение с использованием jquery: http://jsfiddle.net/k5VET/ (источник: Кросс-браузеры многострочный текст переполнение с эллипсисом, добавленным в ширину & height fixed div?)

Ответ 2

span{
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* no of lines */
    text-overflow: ellipsis;
    overflow:hidden !important;
    width:180px;
}

над CSS-свойством. Положим три точки...
например:

Лорем Ипсум просто манекен текст печати и
машиностроительной промышленности. Lorem...

Ответ 3

добавить width: 200px; и white-space: nowrap; в ваш .text css-блок. Если ширина не установлена, текст просто расширяется и заполняется.