Урезаем текст средствами 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)

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

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

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

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

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

o4kapuk (o4kapuk.ru)

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

Стоит заметить, что 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)

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

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

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

А что с ним?

preprocessor (prepor.ru)

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

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

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

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

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

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

CEBEP

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

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

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

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

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

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

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

Владимир

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

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

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

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

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

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

Популярное