Text-overflow: ellipsis considered harmful

Avatar of Geoff Graham
Geoff Graham am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Eric Eggert:

Es gibt ein paar legitime Anwendungsfälle für diese Technik. Zum Beispiel haben Sie vielleicht eine Tabelle mit Titeln und Beschreibungen. Um mehr Platz für den Titel zu schaffen, beschränken Sie die Beschreibung auf kleinen Ansichtsfenstern auf eine Zeile und wiederholen die Beschreibung auf der Detailseite für dieses Element.

Ich sehe es jedoch oft bei Elementen wie Schaltflächen oder sogar Formularbeschriftungen verwendet, um sie besser aussehen zu lassen(?) oder wenn sie vertikal ausgerichtet werden. Aber sobald Sie das Ansichtsfenster ändern oder die Textgröße ändern, verschwindet das Ende des Textes.

Ich denke, "... wenn es in bestimmten Situationen verwendet wird" gehört dazu, aber ohne macht es sicherlich einen besseren Blog-Post-Titel. Wie Eric sagt, gibt es legitime Anwendungsfälle für das Abschneiden von Text. Vielleicht nur wenige, aber dennoch legitime.

Das ultimative Ziel ist es, den Verlust von Daten zu verhindern, was in CSS durchaus passieren kann. Text, der unbeabsichtigt einen Container überläuft, geht in dem Sinne verloren, dass er einfach nicht da ist. Und wenn dieser Text einfach nicht da ist, werden Benutzer ihn verpassen, selbst wenn es die beste und am besten ausgearbeitete Handlungsaufforderung ist, die jemals im Web veröffentlicht wurde.

Eric weist darauf hin, dass es keine Möglichkeit gibt, den durch text-overflow: ellipsis abgeschnittenen Text sichtbar zu machen. Sobald er weg ist, ist er weg (obwohl Screenreader ihn anscheinend ankündigen). Es sind praktisch verlorene Daten. Das mag für Sie in Ordnung sein. Das ist in Ordnung, solange Sie wissen, was passiert und es beabsichtigt ist.

Aber hier ist, was Eric sagt, das mich dazu bringt, dies zu teilen

Beschränken Sie den Inhalt nicht, damit er zu Ihrem Design passt. Machen Sie Ihr CSS flexibel, um längere Wörter gut zu verarbeiten.

Wiederum möchten Sie vielleicht den Inhalt an das Design anpassen. Aber ich würde wahrscheinlich wie Eric argumentieren, dass das Design sich an den Inhalt anpassen sollte und nicht umgekehrt. Es fällt mir schwer, mich an eine Situation zu erinnern, in der der Text auf einer Seite unwichtig oder ohne Zweck ist, sodass ich ihn an einem beliebigen Punkt abschneiden würde, der durch eine CSS-Eigenschaft bestimmt wird. Vielleicht ein Archiv von Blog-Posts, bei dem jeder Post einen Auszug des Post-Inhalts zeigt, bevor er abgeschnitten wird, aber das ist nicht gerade ein Anwendungsfall für text-overflow: ellipse.

CSS hat die Werkzeuge, um ein flexibles Design zu erstellen, das unterschiedliche Textlängen berücksichtigt. Gehen Sie also vielleicht auf Nummer sicher und schreiben Sie defensives CSS ... CSS, das Probleme antizipiert und weiß, wie es verschiedene Inhaltsszenarien gut verarbeiten kann. text-overflow: ellipsis mag Teil Ihres CSS-Arsenal dafür sein. Es könnte aber auch bedeuten, dass Sie das Kind mit dem Bade ausschütten. Es lohnt sich zu fragen, ob der Verlust dieser Daten den Zweck des Inhalts wert ist, bevor Sie ihm einen Haarschnitt verpassen.

Während wir über das Abschneiden von Text sprechen...

Direkter Link →