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