Текст в одну строку и троеточие в конце CSS | Wiki | PWODEV
, 16.11.2017 07:40

Текст в одну строку и троеточие в конце CSS


Текст в одну строку и троеточие в конце. Как это сделать? Text in one line and ellipses at the end.

Для этого есть замечательное CSS3 свойство text-overflow.

Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.

Значения text-overflow:

clip — Текст который не помещается обрезается.

ellipsis — Текст обрезается и в конце мы увидим троеточие.

Пример использования:

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


Один комментарий на «“Текст в одну строку и троеточие в конце CSS”»

Добавить комментарий