Урезаем текст средствами CSS: concept proof
Возникла у меня на днях задача — обрезать текст средствами браузера с красивым многоточием, если текст не умещался. Обычно такую проблему решают через JavaScript, но мне пришло в голову сделать это средствами CSS, я даже сразу придумал откуда можно начать.
В «резиновом» контейнере заключаем текст, в его конце должен быть плавающий элемент, справа перекрывающий родительский слой и уходящий за его пределы. Когда строка умещается по ширине (и браузер не пытается её перенести), этот элемент перекрывает многоточие, которое идёт сразу за контейнером. Когда ширины контейнера перестаёт хватает, браузер пытается сделать перенос и переносит перекрывающий слой на следующую строку, многоточие «открывается».
В качестве concept proof я накидал небольшой пример, который сразу заработал в «Опере» и «Сафари», FF2 и IE7 возможностями победнее, они не потянули, видимо, в них придётся убрать селектор «:after» и заменить всё тегами с троеточиями внутри.
Сам код:
В «резиновом» контейнере заключаем текст, в его конце должен быть плавающий элемент, справа перекрывающий родительский слой и уходящий за его пределы. Когда строка умещается по ширине (и браузер не пытается её перенести), этот элемент перекрывает многоточие, которое идёт сразу за контейнером. Когда ширины контейнера перестаёт хватает, браузер пытается сделать перенос и переносит перекрывающий слой на следующую строку, многоточие «открывается».
В качестве 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 17:39
FX Poster (blog.fxposter.org)
Ну, во первых в FF :after поддерживается. Относительно того, как оно работает - если текст короткий, то div.crop:after закроется div.crop div:after, так? А то я недопонял, как оно работает.11 апреля 2008, 19:38