text-overflow

De eigenschap text-overflow in CSS behandelt situaties waarin tekst wordt afgekapt wanneer deze over het vak van het element loopt. Het kan worden afgekapt (dwz afgekapt, verborgen), een weglatingsteken (…, Unicode-bereikwaarde U + 2026) weergeven of een door de auteur gedefinieerde tekenreeks weergeven (momenteel geen browserondersteuning voor door de auteur gedefinieerde strings).

Houd er rekening mee dat text-overflow alleen voorkomt wanneer de overflow -eigenschap van de container de waarde heeft hidden, scroll of auto en white-space: nowrap;.

Tekstoverloop kan alleen voorkomen op blok- of inline-blokniveau-elementen, omdat het element een breedte moet hebben om overloop te worden. De overloop vindt plaats in de richting zoals bepaald door de eigenschap direction of gerelateerde attributen.

De volgende demo toont het gedrag van de eigenschap text-overflow inclusief alle mogelijke waarden. Browserondersteuning varieert!

  Bekijk deze pen! 

Instelling overflow tot scroll of auto zullen schuifbalken weergeven om de extra tekst weer te geven, terwijl hidden zal niet. De verborgen tekst kan worden geselecteerd door de ellipsen te selecteren.

Old Stuff

Een oude versie van de specificatie zegt dat je een URL naar een afbeelding zou kunnen gebruiken voor de ellipsen, maar het ziet er zo uit als als dat werd verwijderd.

Er is een syntaxis met twee waarden, bijv text-overflow: ellipsis ellipsis;, die de overloop aan de linker- en rechterkant van dezelfde container zou regelen. Ik weet niet zeker hoe dat mogelijk zou zijn. Misschien gecentreerde tekst in een te kleine container? De nieuwe specificatie zegt dat dit, evenals het definiëren van een string, “in gevaar” is.

Ik weet niet zeker waar ellipsis-word vandaan kwam. Het staat niet in de specificatie of in enige andere documentatie anders dan op WebPlatform.org.

De text-overflow eigenschap was vroeger een afkorting voor de combinatie van text-overflow-mode en text-overflow-ellipsis, maar niet meer en die afzonderlijke eigenschappen bestaan niet.

Gerelateerde eigenschappen

• white-space
• overflow
• word-break
• width