Вернуться




CSS и ограничение символов: значение, для чего нужно и как использовать



Сейчас очень много макетов сайтов создаются при помощи CSS. Данный язык стилей приобрел широкую популярность у веб-дизайнеров и веб-разработчиков за счет своей легкости в применении. На CSS одинаково просто сделать макет сайта или всего лишь ограничение длины тексты в блоке.

Мы как раз поговорим о том, как происходит ограничение длины текста или любых других символов при помощи CSS.

Когда нужно ограничение длины текста при помощи CSS 

Если вы практикующий веб-разработчик на HTML/CSS, вы точно знаете про такие ситуации, когда небольшое изменение длины фрагмента текста может «сломать» весь внешний вид веб-страницы.

Или когда вы выстраиваете сетку из блоков «div» одинакового размера, а текст во всех блоках разный. И получается, что либо «див» меняет размер, либо текст выходит из блока. И то, и то очень нежелательно, потому что любой уважающий себя фронтенд-разработчик стремится делать аккуратные и красивые проекты. Тут и приходит на помощь свойство CSS «overflow» или конкретно для текста «text-overflow».

Свойство «text-overflow» как ограничение числа символов CSS 

Данное свойство будет указывать, что делать с тем содержимым, которое будет переполнять блок, а именно, как оно будет показываться пользователю. К примеру, его можно:

  • просто обрезать;

  • отобразить многоточие «...»;

  • отобразить строку полностью.

Свойство «text-overflow»поддерживается всеми свежими версиями современных браузеров, поэтому проблем с отображением у большинства пользователей не будет.

Данное свойство CSS, чтобы распространить ограничение длины текста, может принимать несколько значений:

  1. Clip. Это значение предустановлено, текст будет обрезанным и недоступным.

  2. Ellipsis. В месте обрезания текста будет стоять многоточие.

  3. String. Вместо обрезанного текста отображаться будет пользовательская строка. Это значение поддерживает только браузер Firefox. 

  4. Initial. Тексту будет присвоено свойство по умолчанию для данных типов блоков.

  5. Inherit. Текст будет присваивать свойство от родительского элемента.

Как видите, при помощи свойства CSS легко можно создать ограничение длины выводимого текста и добиться красивого внешнего вида своей веб-страницы.

 



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Стоит ли учиться программировать в 2021

Стоит ли учиться программировать в 2021

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

21 Февраля 2021    Другое

Плюсы и минусы Baas для разработки мобильных приложений

Плюсы и минусы Baas для разработки мобильных приложений

Если вы хотите заказать разработку мобильного приложения, причем чтобы вам ...

23 Марта 2021    Другое

Начинающий программист

Начинающий программист

Самыми легкими в изучении можно считать такие языки как JavaScript, Python, ...

23 Марта 2021    Другое