Сейчас очень много макетов сайтов создаются при помощи CSS. Данный язык стилей приобрел широкую популярность у веб-дизайнеров и веб-разработчиков за счет своей легкости в применении. На CSS одинаково просто сделать макет сайта или всего лишь ограничение длины тексты в блоке.
Мы как раз поговорим о том, как происходит ограничение длины текста или любых других символов при помощи CSS.
Когда нужно ограничение длины текста при помощи CSS
Если вы практикующий веб-разработчик на HTML/CSS, вы точно знаете про такие ситуации, когда небольшое изменение длины фрагмента текста может «сломать» весь внешний вид веб-страницы.
Или когда вы выстраиваете сетку из блоков «div» одинакового размера, а текст во всех блоках разный. И получается, что либо «див» меняет размер, либо текст выходит из блока. И то, и то — очень нежелательно, потому что любой уважающий себя фронтенд-разработчик стремится делать аккуратные и красивые проекты. Тут и приходит на помощь свойство CSS «overflow» или конкретно для текста — «text-overflow».
Свойство «text-overflow» как ограничение числа символов CSS
Данное свойство будет указывать, что делать с тем содержимым, которое будет переполнять блок, а именно, как оно будет показываться пользователю. К примеру, его можно:
просто обрезать;
отобразить многоточие «...»;
отобразить строку полностью.
Свойство «text-overflow»поддерживается всеми свежими версиями современных браузеров, поэтому проблем с отображением у большинства пользователей не будет.
Данное свойство CSS, чтобы распространить ограничение длины текста, может принимать несколько значений:
Clip. Это значение предустановлено, текст будет обрезанным и недоступным.
Ellipsis. В месте обрезания текста будет стоять многоточие.
String. Вместо обрезанного текста отображаться будет пользовательская строка. Это значение поддерживает только браузер Firefox.
Initial. Тексту будет присвоено свойство по умолчанию для данных типов блоков.
Inherit. Текст будет присваивать свойство от родительского элемента.
Как видите, при помощи свойства CSS легко можно создать ограничение длины выводимого текста и добиться красивого внешнего вида своей веб-страницы.
Другое
