Ratgeber: Lange Kennungen auf schmalen Karten lesbar halten

Wenn ein einziger Text die Karte verbreitert

Eine ansonsten gut lesbare mobile Seite kann an einem langen Dateinamen oder einer durchgehenden Kennung scheitern. Der Text drückt die Karte über den Bildschirmrand, und die ganze Seite lässt sich plötzlich seitlich verschieben. Dieser Ratgeber erklärt eine bestehende CSS-Eigenschaft anhand der MDN-Referenz und eines eigenen kleinen Prüfauftrags.

overflow-wrap erlaubt dem Browser zusätzliche Umbrüche in sonst schwer teilbaren Zeichenfolgen. Der Wert anywhere kann lange Folgen umbrechen, wenn reguläre Möglichkeiten fehlen. Dabei wird kein sichtbarer Trennstrich eingefügt. Die Eigenschaft verändert die Darstellung des Texts; sie ersetzt keine allgemeine Prüfung des umgebenden Layouts.

Einen realistischen Problemfall bauen

Stelle dir eine Dokumentenliste für eine Vereinsverwaltung vor. Eine Karte zeigt Titel, Dateiname und Downloadknopf. Lege für den Test einen absichtlich langen Beispieldateinamen ohne Leerzeichen an. Dazu kommen ein normaler deutscher Titel und eine lange Internetadresse. Alle drei Texte müssen auf einem schmalen Bildschirm unterschiedlich sinnvoll behandelt werden.

Bitte im Bauauftrag darum, lange technische Angaben innerhalb ihrer Karte umbrechen zu lassen. Ein redaktioneller Titel soll weiterhin angenehm lesbar bleiben. Verlange außerdem, dass der vollständig kopierte Dateiname unverändert bleibt. Visuelle Umbrüche dürfen nicht als zusätzliche Zeichen in den tatsächlichen Inhalt übernommen werden.

Nicht nur das Browserfenster verkleinern

Prüfe die Karten bei schmaler Breite und mit vergrößerter Schrift. Suche nach horizontalem Seitenüberlauf und nach abgeschnittenen Bedienelementen. Kopiere anschließend den langen Namen in einen lokalen Texteditor und vergleiche ihn mit dem Original. Damit kontrollierst du Darstellung und Nutzbarkeit getrennt.

Falls die Karte weiterhin zu breit ist, untersuche auch ihre feste Breite, Mindestbreite und eingebettete Elemente. Eine Textregel kann keine beliebig breite Tabelle oder Grafik automatisch passend machen. Beschreibe den Fehler deshalb konkret: Welches Element ragt heraus, unter welcher Breite und mit welchem Inhalt?

Lesbarkeit statt pauschales Abschneiden

Manchmal ist eine gekürzte Vorschau sinnvoll, etwa in einer sehr kompakten Liste. Dann braucht die Person einen verlässlichen Weg zum vollständigen Wert. Für eine Detailansicht ist das Umbrechen häufig verständlicher. Entscheide dies anhand der Aufgabe: Soll die Kennung nur wiedererkannt, genau verglichen oder kopiert werden? Diese Frage führt zu einer besseren Oberfläche als eine pauschale Regel, die überall die letzten Zeichen versteckt und damit ausgerechnet den entscheidenden Unterschied zwischen zwei Dateien entfernt.