Эллипсис с переполнением текста без "белого пространства: nowrap"?

Мне было интересно, есть ли какой-нибудь умный способ, чтобы добиться эффекта эллипса css без необходимости применять white-space: nowrap.

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

Быстрый пример: http://jsfiddle.net/fpv9n/2/

Текст должен быть таким, как есть, но также с эллипсисом в конце. Любой способ добиться этого с помощью CSS? Я бы принял во внимание JS-решения.

Ответ 1

Нет никакого способа сделать это, используя чистый CSS. Это чудовищно и грустно. Я часто желал этого сам, когда вы хотите, чтобы браузер "эллипсировал" многострочный текст с возможным переполнением текста всякий раз, когда он выливается из контейнера.

Ответ 2

Вы можете подделать многоточие с содержимым: "..." и position: absolute; установить высоту в пределах строк строки (добавить в конечном итоге вертикальное заполнение)
http://jsfiddle.net/V3ZQH/

span {
    background-color: red;
    width: 100px;
    /*height: 50px;*/
    height:2.4em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap; */
    position:relative;
    padding:0 0.5em;
}
span:after {
    content:'...';
    background:inherit;
    position:absolute;
    bottom:0;
    right:0;
    box-shadow:0 0 5px red
}

Ответ 3

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

height: 2em;
font-size: 1em;
line-height: 1em;