Переповнення тексту - CSS-хитрощі

text-overflowВластивість в CSS розглядаються ситуації , коли текст обрізається , якщо воно переповнює бокс елемента. Його можна обрізати (тобто відрізати, приховати), відобразити крапку ('...', значення діапазону Unicode U + 2026) або відобразити визначений автором рядок (поточна підтримка браузера для визначених автором рядків).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Зауважте, що це text-overflowвідбувається лише тоді, коли overflowвластивість контейнера має значення hidden, scrollабо autoта white-space: nowrap;.

Переповнення тексту може відбуватися лише на елементах рівня блоку або вбудованого блоку, оскільки елемент повинен мати ширину, щоб бути переповненим. Переповнення відбувається у напрямку, визначеному властивістю direction або пов’язаними атрибутами.

Наступна демонстрація демонструє поведінку text-overflowвластивості, включаючи всі можливі значення. Підтримка браузера різниться!

Перевірте цю ручку!

Установка overflowна scrollабо autoбуде відображати смуги прокрутки , щоб відкрити додатковий текст, в той час hiddenне буде. Прихований текст можна виділити, вибравши еліпси.

Старі речі

У старій версії специфікації сказано, що ви можете використовувати URL-адресу зображення для еліпсиса, але, схоже, це було скинуто.

Існує двозначний синтаксис, наприклад text-overflow: ellipsis ellipsis;, який контролює переповнення лівої та правої сторін одного контейнера. Я не впевнений, як цього можна було б досягти. Можливо, текст у центрі в занадто малому контейнері? Нова специфікація говорить, що це, як і визначення рядка, "ризикує".

Я не впевнений, звідки ellipsis-wordвзявся. Цього немає в специфікації або в будь-якій іншій документації, крім WebPlatform.org.

text-overflowВластивість використовується як скорочення для комбінації text-overflow-modeі text-overflow-ellipsis, але не більше , і ці окремі властивості не існує.