Pretečenie textu - Triky CSS | Almanach CSS 2025

text-overflowNehnuteľnosť v CSS sa zaoberá situáciou, kedy je textový zastrihnutými keď to pretečie okno schema prvku. Môže byť orezaný (tj. Orezaný, skrytý), zobraziť elipsu („…“, hodnota rozsahu Unicode U + 2026) alebo zobraziť reťazec definovaný autorom (pre reťazce definované autorom neexistuje aktuálna podpora prehľadávača).

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

Upozorňujeme, že text-overflowk tomu dôjde , iba ak má vlastnosť kontajnera overflowhodnotu hidden, scrollalebo autoa white-space: nowrap;.

K pretečeniu textu môže dôjsť iba na blokových alebo vložených blokových prvkoch, pretože prvok musí mať šírku, aby mohol byť pretečený. K pretečeniu dôjde v smere určenom vlastnosťou smeru alebo súvisiacimi atribútmi.

Nasledujúca ukážka zobrazuje správanie text-overflowvlastnosti vrátane všetkých možných hodnôt. Podpora prehľadávača sa líši!

Vyskúšajte toto pero!

Nastavenie overflowna scrollalebo autozobrazí posuvníky, aby sa zobrazil ďalší text, zatiaľ čo hiddennebude. Skrytý text je možné zvoliť výberom elipsy.

Staré veci

Stará verzia špecifikácie hovorí, že môžete použiť adresu URL obrázka s elipsou, ale vyzerá to, akoby bol vynechaný.

Existuje dvojhodnotová syntax, napr text-overflow: ellipsis ellipsis;. Ktorá by riadila pretečenie na ľavej a pravej strane toho istého kontajnera. Nie som si istý, ako by to bolo možné dosiahnuť. Možno text v strede v príliš malom kontajneri? Nová špecifikácia hovorí, že toto je rovnako ako definícia reťazca „ohrozené“.

Nie som si istý, odkiaľ sa ellipsis-wordvzalo. Nie je to v špecifikácii ani v inej dokumentácii, ktorá nie je na WebPlatform.org.

text-overflowVlastnosť býval skratka pre kombináciu text-overflow-modea text-overflow-ellipsis, ale teraz už nie, a tie zvláštne vlastnosti neexistujú.