Как сделать троеточие css

Как сделать троеточие css

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b832b99abb477a4 • Your IP : 89.162.247.52 • Performance & security by Cloudflare

Свойство text-overflow

Свойство text-overflow добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан.

Для работы свойства текст должен быть обрезан через свойство overflow или свойство overflow-x в значении hidden , auto или scroll . Если задано visible (а так и есть по умолчанию) — text-overflow работать не будет.

Синтаксис

Значения

Значение Описание
ellipsis Добавляет в конец обрезанного текста троеточие.
clip Не добавляет троеточие в конец (это значение по умолчанию, нужно для отмены действия свойства при необходимости).

Значение по умолчанию: clip .

Пример . Вылезающий текст

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

Пример . Добавим свойство overflow

Сейчас все, что вылезло за границы контейнера, просто обрежется:

Пример . Значение ellipsis

Сейчас в дополнение к свойству overflow добавим еще и text-overflow в значении ellipsis . Обрезанному тексту добавится троеточие в конец:

Пример . С полосами прокрутки

Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:

Пример . Если нет очень длинных слов

Если нет настолько длинных слов, чтобы они вылазили за границу контейнера, то обрезания не произойдет (ничего же не вылазит). Посмотрите следующий пример:

Пример . Текст в одну строку

Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства white-space в значении nowrap , которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:

Пример . Ширина в процентах

Если задать ширину блока в %, то обрезание тоже будет работать корректно:

text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Синтаксис

text-overflow: clip | ellipsis

Значения

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Многоточие в конце текста

Рис. 1. Многоточие в конце текста

Браузеры

Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *