Мне было интересно, есть ли какой-нибудь умный способ, чтобы добиться эффекта эллипса css без необходимости применять white-space: nowrap.
Другими словами, скажем, у нас есть элемент блока определенной высоты, и мы хотели бы, чтобы он заполнился текстовым контентом, но эллипсис должен применяться, как только больше нет места в горизонтальном плюс.
Быстрый пример: http://jsfiddle.net/fpv9n/2/
Текст должен быть таким, как есть, но также с эллипсисом в конце. Любой способ добиться этого с помощью CSS? Я бы принял во внимание JS-решения.
Нет никакого способа сделать это, используя чистый CSS. Это чудовищно и грустно. Я часто желал этого сам, когда вы хотите, чтобы браузер "эллипсировал" многострочный текст с возможным переполнением текста всякий раз, когда он выливается из контейнера.
Вы можете подделать многоточие с содержимым: "..." и 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
}
Я знаю только об уродливых работах вокруг content, абсолютных позициях, вспомогательных элементах, содержащих точки и отступы. Я думаю, что лучше всего, чтобы ваш рост был точным множеством высоты вашей линии, например:
height: 2em;
font-size: 1em;
line-height: 1em;