Proprietatea text-overflow din CSS se ocupă de situații în care textul este decupat atunci când debordează caseta elementului. Poate fi decupat (adică tăiat, ascuns), poate afișa o elipsă („…”, valoare Unicode Range U + 2026) sau poate afișa un șir definit de autor (nu există suport curent de browser pentru șirurile definite de autor).
Rețineți că text-overflow apare numai atunci când proprietatea overflow a containerului are valoarea hidden, scroll sau auto și white-space: nowrap;.
Depășirea textului se poate întâmpla numai la elementele de nivel bloc sau bloc în linie, deoarece elementul trebuie să aibă o lățime pentru a putea fi editat de depășire. Debordarea are loc în direcția determinată de proprietatea direcției sau de atributele conexe.
Următoarea demonstrație afișează comportamentul proprietății text-overflow, inclusiv toate valorile posibile. Suportul pentru browser variază!
Setare overflow la scroll sau auto va afișa bare de derulare pentru a dezvălui textul suplimentar, în timp ce hidden nu va. Textul ascuns poate fi selectat selectând elipsele.
Lucruri vechi
O versiune veche a specificației spune că puteți utiliza o adresă URL pentru o imagine pentru elipsă, dar arată ca dacă a fost eliminat.
Există o sintaxă cu două valori, de ex text-overflow: ellipsis ellipsis;, care ar controla revărsarea în partea stângă și dreapta a aceluiași container. Nu sunt sigur cum ar fi posibil să se realizeze acest lucru. Poate că textul este centrat într-un container prea mic? Noua specificație spune că acest lucru, precum și definirea unui șir, este „în pericol”.
Nu sunt sigur de unde a venit ellipsis-word. Nu este în specificația sau în orice altă documentație, alta decât pe WebPlatform.org.
Proprietatea text-overflow a fost prescurtată pentru combinația text-overflow-mode și text-overflow-ellipsis, dar nu mai există și acele proprietăți separate nu mai există.
Proprietăți conexe
-
white-space -
overflow -
word-break -
width