Tekstoverløb: Ellipsis anses for at være skadelig

Genudgivet af Platon

Abonnenter: 0

Der er et par legitime use cases for denne teknik. For eksempel kan du have en tabel med titler og beskrivelser. For at bevare mere plads til titlen, begrænser du beskrivelsen til én linje på små visningsporte til én linje, og du gentager beskrivelsen på detaljesiden for dette element.

Jeg ser det dog ofte brugt på elementer som knapper eller endda formetiketter for at få dem til at se pænere ud(?), eller når de skal justeres lodret. Men når du først ændrer visningsporten eller ændrer størrelsen på teksten, forsvinder slutningen af teksten.

Jeg tror, "... hvis det bruges i visse situationer" hører hjemme der, men det giver bestemt en bedre blogindlægstitel uden det. Som Eric siger, er der legitime use cases for trunkering af tekst. Måske kun få, men ikke desto mindre legitime.

Det ultimative mål er at forhindre "tab" af data, noget det kan helt sikkert ske i CSS. Tekst, der utilsigtet flyder over en beholder, går tabt i den forstand, at den simpelthen ikke er der. Og hvis den tekst simpelthen ikke er der, vil brugerne gå glip af den, selvom det er den bedste og mest gennemarbejdede opfordring til handling, der nogensinde er udgivet på nettet.

Eric påpeger, at der ikke er nogen måde at gøre teksten afkortet af text-overflow: ellipsis synlig. Når det først er væk, er det væk (selvom skærmlæsere ser ud til at annoncere det). Det er praktisk talt tabte data. Det kan du være okay med. Det er fedt, så længe du ved, hvad der sker, og det er tilsigtet.

Men her er hvad Eric siger, der fik mig til at ville dele dette:

Begræns ikke indholdet, så det passer til dit design, gør din CSS fleksibel til at håndtere længere ord med ynde.

Igen, dig måske ønsker at tilpasse indholdet til designet. Men jeg vil nok hævde, ligesom Eric, at design skal tilpasse sig indholdet frem for omvendt. Jeg har svært ved at huske en situation, hvor teksten på en side er ligegyldig eller uden formål i den udstrækning, at jeg ville være cool, hvis jeg skulle afskære den på et hvilket som helst vilkårligt tidspunkt bestemt af en CSS-egenskab. Måske et arkiv af blogindlæg, hvor hvert indlæg viser et uddrag af indlæggets indhold før trunkering, men det er ikke ligefrem en use case for text-overflow: ellipse.

CSS har værktøjerne til at lave et fleksibelt design, der tager højde for forskellige længder af tekst. Så måske tage fejl af skrive defensiv CSS… CSS, der foregriber problemer og ved, hvordan man elegant håndterer forskellige indholdsscenarier. text-overflow: ellipsis kan være en del af dit CSS-arsenal til det. Men det kan også være at smide barnet ud med badevandet. Værd at spørge, om tab af disse data er værd at betale for, hvad indholdet skal gøre, før du giver det en klipning.

Mens vi taler om at afkorte tekst...

Link den okt 1, 2021