Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Урезаем текст средствами 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>
12 комментариев
FX Poster (blog.fxposter.org) 2008

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

Евгений Степанищев (bolknote.ru) 2008

Комментарий для blog.fxposter.org:

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

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

o4kapuk (o4kapuk.ru) 2008

Комментарий для Евгения Степанищева:

Стоит заметить, что Safari само по себе <a href=» http://www.css3.info/preview/text-overflow/%22%3E%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%B2%D0%B0%D0%B5%D1%82%3C/a%3E text-overflow: ellipsis;

preprocessor (prepor.ru) 2008

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

Евгений Степанищев (bolknote.ru) 2008

Комментарий для prepor.ru:

А что с ним?

preprocessor (prepor.ru) 2008

Комментарий для Евгения Степанищева:

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

Евгений Степанищев (bolknote.ru) 2008

Комментарий для prepor.ru:

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

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

CEBEP 2010

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

Евгений Степанищев (bolknote.ru) 2010

Комментарий для CEBEP:

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

Евгений Степанищев (bolknote.ru) 2010

Комментарий для CEBEP:

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

Владимир 2013

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

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

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

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Владимир:

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