CSS text-overflow: ellipsis, line clamp en woordafbreking
CSS-lab voor overflow en tekst afkappen
CSS text-overflow: ellipsis, line clamp, word-break | We.Inc
Verklein een vak met een lange URL en een Duits samengesteld woord en probeer daarna overflow, text-overflow: ellipsis, line clamp, word-break, overflow-wrap en hyphens live uit, met Tailwind-klassen.
Lange content ontsnapt uit zijn vak als het vak te klein is. overflow bepaalt wat er met het teveel gebeurt: visible, hidden, clip, scroll of auto. Voor één regel die eindigt op puntjes combineert u white-space: nowrap, overflow: hidden en text-overflow: ellipsis. Voor meerdere regels gebruikt u -webkit-line-clamp. Om onbreekbare woorden te splitsen, gebruikt u overflow-wrap: anywhere.
Sleep de breedteschuif en het voorbeeldvak krimpt rond een echt webadres, het woord Donaudampfschifffahrtsgesellschaft en een gewone zin. Elke optie voor overflow, terugloop en afkappen is een knop, het resultaat is direct zichtbaar, en de CSS die u nodig hebt staat eronder uitgeschreven.
Kies welke voorbeeldtekst u laadt: een URL, een lang samengesteld woord of een alinea.
Sleep de breedteschuif tot de tekst niet meer past.
Probeer een voor een de overflow-waarden, ellipsis, een line clamp en de opties voor woordafbreking.
Kopieer de CSS die past bij het resultaat dat u bevalt.
Ellipsis heeft alle drie nodig: nowrap, een overflow anders dan visible, en een breedtebeperking. Ontbreekt er één, dan verschijnen er geen puntjes.
Binnen een flex-rij heeft een afgekapt kind ook min-width: 0 nodig, omdat flex-items standaard weigeren kleiner te worden dan hun content.
Zet de volledige tekst in een title-attribuut of toon hem bij focus, want afkappen verbergt woorden voor mensen die niet kunnen hoveren.
hyphens: auto breekt alleen af als het element of een parent een lang-attribuut heeft waarvoor de browser een woordenboek heeft.
Veelgestelde vragen
Waarom werkt text-overflow: ellipsis niet?
Meestal ontbreekt een van de partners. Het element moet block-level of inline-block zijn met een beperkte breedte, overflow op hidden of clip hebben, en de tekst op één regel houden met white-space: nowrap. Voeg in een flex- of grid-item ook min-width: 0 toe, zodat het item mag krimpen.
Wordt line-clamp ondersteund zonder het voorvoegsel -webkit-?
De vorm met voorvoegsel, -webkit-line-clamp samen met display: -webkit-box en -webkit-box-orient: vertical, werkt in alle huidige grote browsers en is wat Tailwind genereert. De eigenschap line-clamp zonder voorvoegsel uit CSS Overflow Level 4 wordt nog uitgerold, dus controleer caniuse voordat u er alleen op vertrouwt.
Wat is het verschil tussen word-break en overflow-wrap?
overflow-wrap breekt een woord alleen af als het anders zou overlopen, dus gewone woorden lopen normaal terug. word-break: break-all laat de browser overal tussen elke twee letters afbreken, wat rafelige, slecht leesbare tekst geeft. word-break: keep-all is voor Chinese, Japanse en Koreaanse tekst waarin u geen afbrekingen binnen woorden wilt.
Wat doet overflow: clip dat hidden niet doet?
Beide kappen het teveel af. hidden maakt nog steeds een scrollcontainer, dus een script kan erin scrollen en het beïnvloedt position: sticky erbinnen. clip verbiedt elk scrollen, en met overflow-clip-margin kunt u content een paar pixels voorbij de rand laten lopen voordat er wordt afgekapt.
Hoe kap ik tekst af in een tabelcel?
Zet table-layout: fixed op de tabel en een breedte op de kolommen, en pas dan het gebruikelijke trio nowrap, hidden en ellipsis toe op de cel. Zonder vaste lay-out groeit de kolom gewoon mee met de tekst. Een andere optie is max-width: 0 met width: 100% op de cel.
De vijf overflow-waarden
visible is de standaard en laat content buiten het vak tekenen zonder de lay-out eromheen te beïnvloeden. hidden en clip kappen het af bij de padding-rand. scroll toont altijd scrollbalken, ook als er niets overloopt, en auto toont ze alleen als dat nodig is, wat bijna altijd de betere keuze is.
overflow is een verkorte schrijfwijze voor overflow-x en overflow-y. De ene as op visible en de andere op hidden zetten werkt niet zoals geschreven: de browser berekent visible in die combinatie als auto, dus u kunt een onverwachte scrollbalk zien. clip is de uitzondering en kan met visible worden gecombineerd.
Woorden afbreken die niet passen
overflow-wrap: break-word breekt lange woorden af wanneer nodig, maar laat het vak niet kleiner worden dan het langste woord, waardoor het binnen flex-items en tabellen nog steeds kan overlopen. overflow-wrap: anywhere verlaagt ook die minimale grootte, en daarom lost het lange URL's in smalle zijbalken op.
hyphens: auto voegt een afbreekstreepje in op een correcte lettergreepgrens voor talen die de browser ondersteunt, waardoor uitgevulde of smalle Duitse en Nederlandse tekst veel beter leesbaar wordt. Sommige Safari-versies begrijpen alleen -webkit-hyphens, dus schrijf beide. Gebruik hyphens: manual en het zachte afbreekstreepje ­ als u de afbreekpunten zelf wilt kiezen.
Afkappen en toegankelijkheid
Afgekapte tekst staat nog steeds in de pagina, dus schermlezers lezen alles voor, en dat is goed. Ziende toetsenbord- en aanraakgebruikers zijn degenen die iets missen, omdat zij niet kunnen hoveren om een tooltip te zien.
Bied voor productnamen of berichten die ertoe doen een manier om de tekst uit te klappen, zoals een knop Meer tonen of een details-element, in plaats van alleen op de ellipsis te vertrouwen. Gebruik line clamps voor previews waarbij de volledige tekst één klik verder is.
overflow-waarden vergeleken
Wat elke overflow-waarde doet
Waarde
Overtollige content
Scrollbalken
Scrollcontainer?
Tailwind
Wordt buiten het vak getekend
Nooit
Nee
Afgekapt bij de padding-rand
Nooit
Ja (scrollbaar via script)
Afgekapt
Nooit
Nee
Scrollt
Altijd zichtbaar
Ja
Scrollt
Alleen indien nodig
Ja
Ellipsis op één regel
Het ellipsis-recept van drie regels
Verwijder een van de drie declaraties en de puntjes verdwijnen. Het title-attribuut houdt de volledige tekst beschikbaar.
Ellipsis binnen een flex-rij
Het middelste item krijgt min-width: 0, zodat het kleiner mag worden dan zijn tekstbreedte. Zonder dat loopt de rij in plaats daarvan over.
Afkappen over meerdere regels
Een kaartbeschrijving afkappen op drie regels
Het patroon met voorvoegsel hieronder wordt het breedst ondersteund. De gewone line-clamp-declaratie is toegevoegd voor browsers die die al begrijpen.
word-break vs overflow-wrap vs hyphens
Lange woorden afbreken
Declaratie
Breekt af waar
Geschikt voor
Tailwind
overflow-wrap: break-word
Binnen een woord, alleen als het anders zou overlopen
Lopende tekst met af en toe een lang woord
overflow-wrap: anywhere
Hetzelfde, en laat het vak krimpen
URL's in flex-items en smalle kolommen
wrap-anywhere (v4.1)
word-break: break-all
Tussen alle letters, altijd
Code, hashes, ID's
word-break: keep-all
Nooit binnen CJK-woorden
Chinees, Japans, Koreaans
hyphens: auto
Bij lettergrepen, met een afbreekstreepje
Smalle of uitgevulde tekst met lang ingesteld
Dezelfde URL met vier afbreekinstellingen
Elk vak is 160px breed. Alleen het laatste mag overlopen.
Tabelcellen afkappen
Vaste tabellay-out met ellipsis-cellen
table-layout: fixed laat de kolombreedtes winnen van de content, zodat de ellipsis kan ingrijpen.
Lange URL
Duits samengesteld woord
Alinea
Verse koffiebonen worden elke dinsdag gebrand en dezelfde middag verzonden, zodat ze de meeste adressen binnen drie dagen na het branden bereiken, terwijl de smaak nog op zijn best is.
Ellipsis op zich heeft white-space: nowrap nodig (of een line clamp).
Ellipsis heeft overflow op hidden of clip nodig.
Een line clamp heeft overflow: hidden nodig om de rest af te kappen.