Text-overflow - CSS-trucs | CSS Almanac 2025

De text-overfloweigenschap 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 weergeven ('…', Unicode-bereikwaarde U + 2026) of een door de auteur gedefinieerde tekenreeks weergeven (geen huidige browserondersteuning voor door de auteur gedefinieerde strings).

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

Merk op dat dit text-overflowalleen gebeurt als de overfloweigenschap van de container de waarde heeft hidden, scrollof autoen white-space: nowrap;.

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

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

Kijk eens naar deze pen!

Als u instelt overflowop scrollof auto, worden schuifbalken weergegeven om de extra tekst weer te geven, terwijl hiddendat niet het geval is. De verborgen tekst kan worden geselecteerd door de ellipsen te selecteren.

Oude spullen

Een oude versie van de specificatie zegt dat je een URL naar een afbeelding voor de ellips zou kunnen gebruiken, maar het lijkt erop dat die is verwijderd.

Er is een syntaxis met twee waarden, bijvoorbeeld 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 ik ellipsis-wordvandaan kom. Het staat niet in de specificatie of in enige andere documentatie dan op WebPlatform.org.

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