Урезаем текст средствами CSS: concept proof

Возникла у меня на днях задача — обрезать текст средствами браузера с красивым многоточием, если текст не умещался. Обычно такую проблему решают через JavaScript, но мне пришло в голову сделать это средствами CSS, я даже сразу придумал откуда можно начать.

В «резиновом» контейнере заключаем текст, в его конце должен быть плавающий элемент, справа перекрывающий родительский слой и уходящий за его пределы. Когда строка умещается по ширине (и браузер не пытается её перенести), этот элемент перекрывает многоточие, которое идёт сразу за контейнером. Когда ширины контейнера перестаёт хватает, браузер пытается сделать перенос и переносит перекрывающий слой на следующую строку, многоточие «открывается».

CSS text cropping в «Сафари» (6.78КиБ)

В качестве concept proof я накидал небольшой пример, который сразу заработал в «Опере» и «Сафари», FF2 и IE7 возможностями победнее, они не потянули, видимо, в них придётся убрать селектор «:after» и заменить всё тегами с троеточиями внутри.

Сам код:
<style type="text/css">
	body { background: white; color: black; font-family: Arial; font-size: 16px }

	div.crop { width: 100%; height: 20px; overflow: hidden; z-index: 1 }

	div.crop div { float: left; width: auto }

	div.crop:after     { content: '\2026'; position: relative; z-index: 2; background: white; margin-left: -16px }
	div.crop div:after { content: '\2026'; position: relative; z-index: 3; background: white; color: white }
</style>

<body>
<div class="crop"><div>Текст не умещается в контейнер, до того он длинный</div></div>
<div class="crop"><div>Текст не умещается в контейнер</div></div>
</body>
11 апреля 2008 16:39

FX Poster (blog.fxposter.org)
11 апреля 2008, 18:38

Ну, во первых в FF :after поддерживается. Относительно того, как оно работает - если текст короткий, то div.crop:after закроется div.crop div:after, так? А то я недопонял, как оно работает.

bolk (bolknote.ru)
11 апреля 2008, 19:01, ответ предназначен FX Poster (blog.fxposter.org):

Я не сказал, что он его не поддерживает. Он его не поддерживает на должном уровне. Так, чтобы это всё работало.

По по принципу работы — верно.

o4kapuk (o4kapuk.ru)
11 апреля 2008, 20:14, ответ предназначен bolk (bolknote.ru):

Стоит заметить, что Safari само по себе <a href="http://www.css3.info/preview/text-overflow/">поддерживает</a> text-overflow: ellipsis;

preprocessor (prepor.ru)
12 апреля 2008, 13:35

хыхы, а как же ужасный рендер шрифтов сафари? :)

bolk (bolknote.ru)
12 апреля 2008, 15:49, ответ предназначен preprocessor (prepor.ru):

А что с ним?

preprocessor (prepor.ru)
13 апреля 2008, 20:56, ответ предназначен bolk (bolknote.ru):

ну в смысле скриншот-то в сафари сделан. в нем скриншоты лучше выглядят или вы все таки на него перешли?

bolk (bolknote.ru)
13 апреля 2008, 22:15, ответ предназначен preprocessor (prepor.ru):

Зачем переходить на «Сафари»? Что в нём сделано лучше, чем в «Опере»?

Что было в данный момент открыто (а тестировал я в «Сафари» и «Опере»), то я и соскриншотил.

CEBEP (инкогнито)
16 августа 2010, 14:47

Это не работает если засунуть се в таблицу в тег td
<table>
<tr>
    <td >
<div class="crop"><div>Текст не умещается в контейнер, до того он длинный</div></div>
    </td>
</tr>
</table>

bolk (bolknote.ru)
16 августа 2010, 17:20, ответ предназначен CEBEP

Когда исправите, опубликуйте решение, пожалуйста.

bolk (bolknote.ru)
16 августа 2010, 23:36, ответ предназначен CEBEP

Странно, проверил в «Опере», работает в таблице.

Владимир (инкогнито)
20 сентября 2013, 22:50

Криво работает, если текст который переносится на следующую строку, длиннее, чем осталось до конца этой строки, то получается строка следующего вида:
"Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ..."

а на след. строку перенеслось например "тексттексттексттекст"

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

Евгений Степанищев (bolknote.ru)
21 сентября 2013, 11:39, ответ предназначен Владимиру

Не надо сейчас использовать этот способ, 5 лет прошло, есть более нормальные способы: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)