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