Lange Auftragsnummern und deutsche Wörter: Wie soll Ihre Web-App Zeilen umbrechen?

Ein langes deutsches Wort darf anders umbrochen werden als eine Auftragsnummer. Lassen Sie deshalb für Fließtext, technische Kennungen und Internetadressen getrennt festlegen, wo ein sichtbarer Zeilenwechsel erlaubt ist. Die gespeicherte Kennung und der kopierte Wert sollen dabei unverändert bleiben. Ein eingefügtes Leerzeichen ist keine saubere Lösung für ein Darstellungsproblem.

Diese Entscheidung betrifft beispielsweise eine Kundenübersicht, in der eine lange Referenz aus einer schmalen Karte herausragt. Die Karte einfach breiter zu machen hilft auf dem nächsten kleinen Bildschirm möglicherweise nicht. Alle Zeichen beliebig zu trennen macht dagegen normale Sätze mühsam lesbar. Entscheidend ist, was das jeweilige Feld bedeutet.

Drei verschiedene Aufgaben, nicht eine globale Einstellung

Für einen erklärenden Absatz ist sprachgerechte Silbentrennung eine mögliche Lösung. Für eine lange zusammenhängende Kennung geht es eher um einen zusätzlichen Umbruch, wenn sie sonst nicht in die Zeile passt. Für einen Wert, dessen Zeichenfolge Mitarbeiter vergleichen oder abschreiben müssen, kann außerdem eine eigene vollständige Detailansicht sinnvoll sein.

Die technische Grundlage beschreibt das W3C im CSS Text Module Level 3. Die Eigenschaft overflow-wrap regelt zusätzliche Umbruchmöglichkeiten für eine sonst untrennbare Zeichenfolge, die über ihre Zeile hinauslaufen würde. Sie wirkt nur, wenn die Einstellung white-space das Umbrechen überhaupt zulässt. Eine einzelne neue CSS-Regel ist deshalb noch kein Nachweis, dass das Problem im fertigen Formular behoben ist.

Meine Empfehlung für den Auftrag: Listen Sie die betroffenen Feldtypen auf. Schreiben Sie nicht bloß „lange Texte reparieren“, sondern beispielsweise „Beschreibung darf sprachgerecht umbrechen; externe Referenz darf bei Platzmangel ohne hinzugefügte Zeichen umbrechen; vollständiger Wert bleibt auswählbar“.

Was unterscheidet einen Notumbruch von Silbentrennung?

Bei overflow-wrap: anywhere darf eine sonst untrennbare Folge an einer zusätzlichen Stelle umbrechen, wenn keine andere akzeptable Umbruchstelle vorhanden ist. Laut W3C wird dabei kein Trennzeichen eingefügt. Zusammengehörige Graphemcluster müssen als Einheit erhalten bleiben. Das ist keine Anweisung, jedes deutsche Wort grundsätzlich mitten im Wort zu zerlegen.

Silbentrennung ist etwas anderes. Der Abschnitt zur Eigenschaft hyphens beschreibt sie als kontrolliertes Teilen von Wörtern, häufig mit einem sichtbaren Trennzeichen. Die Spezifikation verlangt, dass dieser Darstellungseffekt den zugrunde liegenden Dokumentinhalt sowie Textauswahl und Suche nicht verändert.

Für eine technische Referenz würde ich keine automatische sprachliche Silbentrennung als Standard beauftragen. Ein sichtbarer zusätzlicher Strich könnte beim Abschreiben für einen Bestandteil der Nummer gehalten werden. Für einen langen deutschen Erklärungstext kann die sprachgerechte Trennung dagegen angemessen sein. Das sind Gestaltungsempfehlungen für diese unterschiedlichen Inhalte, keine allgemeine Pflicht aus der Spezifikation.

Warum braucht automatische Silbentrennung die richtige Sprache?

Das W3C nennt zwei Voraussetzungen: Die Inhaltssprache muss bekannt sein, und der Browser muss eine passende Trennressource besitzen. Der Text sollte entsprechend mit seiner tatsächlichen Sprache ausgezeichnet sein, etwa über das HTML-Attribut lang. hyphens: auto allein verspricht daher weder richtige deutsche Trennung in jedem Browser noch eine identische Trennstelle auf jedem Gerät.

Für eine deutschsprachige Oberfläche mit englischen Produktnamen lohnt sich eine bewusste Inhaltsentscheidung. Handelt es sich um normalen deutschen Text, einen fremdsprachigen Satz oder einen unveränderlichen Produktcode? Lassen Sie das nicht aus Großschreibung oder aus dem Namen des Datenbankfelds erraten. Besprechen Sie, welche Felder sprachlich ausgezeichnet werden können und welche ausschließlich Kennungen enthalten.

Die Spezifikation definiert außerdem nicht alle konkreten sprachlichen Trennregeln. Verlangen Sie deshalb eine verständliche, korrekte Darstellung in den vereinbarten Browsern, nicht überall pixelgenau dieselbe Wortaufteilung.

Den Datenwert nicht für das Layout bearbeiten

Eine erfundene Referenz wie ABCD1234567890EFGH1234567890 ist eine gute Testeingabe. Auf dem Bildschirm darf sie nach der vereinbarten Regel in zwei Zeilen stehen. Beim Kopieren, Speichern und späteren Suchen soll sie weiterhin dieselbe zusammenhängende Zeichenfolge sein.

Meine Empfehlung: Fügen Sie keine gewöhnlichen Leerzeichen oder dauerhaften Bindestriche in den gespeicherten Wert ein, nur damit die Karte passt. Prüfen Sie stattdessen die Darstellung getrennt vom Dateninhalt. Auch ein bewusst im Inhalt gesetzter bedingter Trennstrich ist eine andere Maßnahme als eine rein durch CSS zugelassene Umbruchstelle. Für importierte technische Kennungen sollte eine solche Inhaltsänderung nicht stillschweigend erfolgen.

Die CSS-Spezifikation ersetzt dabei keinen Test Ihrer Kopierfunktion oder Ihres Exports. Kontrollieren Sie den tatsächlichen Zielwert in einem einfachen Textfeld. Eine unveränderte Datenbank allein beweist noch nicht, dass eine anwendungseigene Kopierfunktion keine sichtbaren Zeilenwechsel oder Beschriftungen hinzufügt.

Was ist mit Tabellen und abgeschnittenen Werten?

Ein umbrochener Wert kann eine Tabellenzeile höher machen. Entscheiden Sie, ob das für die konkrete Arbeitsliste akzeptabel ist. Bei einer kurzen Übersicht kann eine vollständige mehrzeilige Referenz hilfreicher sein als viele gleich hohe, aber unvollständige Zeilen. Bei einer sehr dichten Liste kann eine deutlich erreichbare Detailansicht die bessere Ergänzung sein.

Falls eine Vorschau gekürzt wird, muss für die vereinbarte Aufgabe klar sein, wo Mitarbeiter den vollständigen Wert finden. Ein Tooltip, der nur beim Darüberfahren mit der Maus erscheint, ist dafür nicht die einzige zu prüfende Nutzungssituation. Testen Sie auch die Bedienung mit Tastatur und auf dem Telefon. Diese Anforderungen sind praktische Abnahmepunkte, keine Behauptung, dass Zeilenumbruch allein eine Anwendung barrierefrei macht.

Eine kleine, aussagekräftige Abnahme

Vereinbaren Sie die tatsächlichen Listen und Detailseiten, dann prüfen Sie dort:

• Ein langes deutsches zusammengesetztes Wort bleibt lesbar und wird nicht von einer Nachbarkarte überdeckt.
• Eine lange Referenz ohne Leerzeichen bleibt vollständig erreichbar und verändert die übrige Bedienung nicht unkontrolliert.
• Eine bereits vorhandene echte Bindestrichfolge bleibt im gespeicherten und kopierten Wert erhalten.
• Der kopierte Testwert stimmt Zeichen für Zeichen mit dem ursprünglichen Wert überein. Nur die sichtbare Anordnung darf abweichen.
• Mehrzeilige Werte verdecken weder Auswahlfelder noch Zeilenaktionen.
• Dieselben Beispiele funktionieren in den vereinbarten Browsern bei schmaler Ansicht und vergrößerter Darstellung.

Nutzen Sie erfundene Nummern und Namen statt echter Kundendaten. Halten Sie Fehler getrennt fest: falscher Umbruch, nicht erreichbarer Volltext und veränderter Kopierwert brauchen möglicherweise unterschiedliche Korrekturen.

Häufige Fragen

Muss ich die genaue CSS-Eigenschaft im Auftrag vorgeben?

Nein. Beschreiben Sie zuerst den Inhalt und das gewünschte Ergebnis. Die technische Umsetzung soll dazu passen. Die Eigenschaftsnamen helfen lediglich, unterschiedliche Maßnahmen nicht miteinander zu verwechseln.

Ist überall beliebiges Umbrechen die einfachste Lösung?

Es ist keine sinnvolle pauschale Inhaltsregel. Ein deutscher Absatz, eine Seriennummer und eine kurze Schaltflächenbeschriftung erfüllen verschiedene Aufgaben. Vereinbaren Sie die Regel pro Feldtyp und prüfen Sie sie mit realistischen Beispielen.

Garantiert die Sprachangabe automatische Trennung?

Nein. Nach der Spezifikation ist zusätzlich eine passende Trennressource erforderlich. Lassen Sie die tatsächlich unterstützten Browser prüfen und eine lesbare Darstellung auch ohne automatische Silbentrennung vorsehen.

Wenn Ihre internen Listen solche Details zuverlässig behandeln sollen, können Sie die betroffenen Ansichten und Abnahmewerte im Rahmen eines Web-App-Projekts besprechen. Entscheidend ist nicht die schönste einzelne Musterkarte, sondern eine klare Regel, die Ihre echten Feldtypen ohne Datenveränderung aushalten.