Преливање текста - ЦСС-трикови

text-overflowИмовина у ЦСС бави ситуацијама у којима се текст се носи када се прелива у пољу елемента је. Може се исећи (тј. Одсећи, сакрити), приказати елипсу ('...', вредност опсега Уницоде У + 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то неће. Скривени текст се може одабрати избором елипса.

Старе ствари

Стара верзија спецификације каже да бисте могли да користите УРЛ слике за елипсу, али изгледа да је то испуштено.

Постоји синтакса са две вредности, на пример text-overflow: ellipsis ellipsis;, која би контролисала преливање на левој и десној страни истог контејнера. Нисам сигуран како би то било могуће постићи. Можда усредсређени текст у премалом контејнеру? Нова спецификација каже да је ово, као и дефинисање низа, „у опасности“.

Нисам сигуран одакле ellipsis-wordдолази. То није у спецификацији или било којој другој документацији осим на ВебПлатформ.орг.

text-overflowИмовина се користи да буде скраћеница за комбинацију text-overflow-modeи text-overflow-ellipsis, али не више и оне посебне особине не постоје.