Препълване на текст - CSS-трикове

В text-overflowимота в CSS се занимава с ситуации, в които текстът се подстригва, когато тя прелива кутия на елемента. Той може да бъде изрязан (т.е. отрязан, скрит), да покаже елипса ('...', Unicode Range Value 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;.

Преливането на текст може да се случи само на елементи на ниво блок или вграден блок, тъй като елементът трябва да има ширина, за да бъде препълнен. Преливането се случва в посоката, определена от свойството посока или свързаните атрибути.

Следващата демонстрация показва поведението на text-overflowсвойството, включително всички възможни стойности. Поддръжката на браузъра варира!

Вижте тази писалка!

Задаването overflowна scrollили autoще показва ленти за превъртане, за да разкрие допълнителния текст, докато hiddenняма. Скритият текст може да бъде избран, като изберете елипсите.

Стари неща

Стара версия на спецификацията казва, че бихте могли да използвате URL към изображение за елипсата, но изглежда, че това е отпаднало.

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

Не съм сигурен откъде ellipsis-wordидва. Това не е в спецификацията или в друга документация, различна от WebPlatform.org.

Преди това text-overflowсвойството беше стенография за комбинацията от text-overflow-modeи text-overflow-ellipsis, но вече не и тези отделни свойства не съществуват.