CSS-Kurs / Überlauf, lange Zeichenfolgen und Auslassungszeichen

Die overflow-Eigenschaft steuert Inhalte, die über ein Feld hinausgehen, wählt jedoch nicht von selbst eine nützliche Textumbruchstrategie. Kombinieren Sie bewusstes Overflow-Verhalten mit Umbruchregeln und verwenden Sie Auslassungspunkte nur, wenn Leser weiterhin auf die vollständigen Informationen zugreifen können.

Vergleichen Sie Overflow-Werte mit identischem Inhalt

Das tatsächliche Erscheinungsbild der Bildlaufleiste und ob sie immer sichtbar ist, hängt von den Overlay-Bildlaufleisteneinstellungen des Betriebssystems und des Browsers ab. Den Wert scroll anzugeben bedeutet nicht, dass die Leiste in allen Umgebungen sichtbar bleibt. Hidden kann ebenfalls durch Skript oder Fokusbewegung gescrollt werden, daher bedeutet es nicht, dass „der Inhalt selbst verschwunden ist“. Clip, das das Scrollen vollständig verhindert, ist ein separater Wert und sollte nicht mit hidden gleichgesetzt werden. Die detaillierte Funktionsweise wird in MDNs Beschreibung von overflow erläutert. Bevor der Overflow ausgeblendet wird, überprüfen Sie, wie Sie die Höhe des Containers, der den Inhalt enthält, mithilfe von Breite, Höhe, min/max-Grenzen und box-sizing auf eine der Größe des Inhalts entsprechende Höhe einstellen.

Wenn allgemeiner Text als feste Höhe behandelt und ausgeblendet wird, können Informationen verschwinden, wenn Sätze hinzugefügt, übersetzt oder Zeichen vergrößert werden. Überlegen Sie zunächst, die Höhe dem Inhalt zu überlassen, und verwenden Sie auto, wenn Größenbeschränkungen erforderlich sind, beispielsweise in einem separaten Panel. Das vollständige Beispiel setzt vier identische Sätze in dieselbe 96px-Box und vergleicht nur die Werte. Nach dem sichtbaren Teil haben wir etwas zusätzlichen Platz für Übungen gelassen, damit der überlaufende Text die folgende Erklärung nicht verdeckt.

Umbrüche bei langen URLs und Bezeichnern

.url { overflow-wrap: anywhere; }

URLs ohne Leerzeichen, Identifikationscodes oder lange Wörter können die Box nach außen drücken, weil es nicht genug Stellen für Zeilenumbrüche gibt. overflow-wrap: anywhere bietet die Möglichkeit für einen Zeilenumbruch mitten im String, falls nötig. Es löscht nicht das Zeichen selbst und fügt kein Zeilenumbruchzeichen in den Stringwert ein. Nur die Anzeige ändert sich, sodass Sie den ursprünglichen String behalten können.

Die Anwendung von word-break: break-all überall kann gewöhnliche Wörter unnötig brechen. Beginnen Sie damit, Brüche in Bereichen mit langen Werten zuzulassen. Flexbox und Grid können ebenfalls automatische Mindestgrößen erzwingen, prüfen Sie daher am betreffenden Element min-width separat. Textumbruch und das Zulassen, dass seine Box schrumpft, lösen unterschiedliche Teile des Problems. Weitere Einzelheiten finden Sie unter Bitte beachten Sie die Beschreibung von MDNs overflow-wrap, Flexbox-Ausrichtung, Umbruch, gap, grow und shrink.

Erfüllen Sie die Bedingungen für einzeilige Ellipsen

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

text-overflow selbst bestimmt weder die Größe der Box noch die Zeilenumbrüche. Mehrzeilige Abkürzungen sind ebenfalls eine separate Methode von diesem Ein-Zeilen-Beispiel. Im vollständigen Beispiel steht der ungekürzte Titel zusätzlich in einem eigenen Absatz, damit er vollständig gelesen werden kann. Verstecken Sie keine Inhalte, die den Originaltext erfordern, wie wichtige Anweisungen oder Fehlermeldungen, ohne eine Möglichkeit, diese anderswo nachzuprüfen. Wir empfehlen, dass Sie den Maus-Tooltip des title-Attributs nicht als einzige Textquelle verwenden. Bitte beachten Sie die Beschreibung von text-overflow bei MDN.

Machen Sie scrollbare Panels für die Tastatur zugänglich

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

Je nach Browser kann der Bildlaufbereich automatisch den Tastaturfokus erhalten oder auch nicht. Durch die Angabe von tabindex="0" für das Panel, auf das Sie zugreifen müssen, können Sie es in der normalen Tab-Reihenfolge erreichen. role="region" und ein beschreibender Name helfen Benutzern von Hilfstechnologien zu verstehen, in welchem Bereich sie sich befinden. Sie müssen nicht unbedingt jedes Feld zum Fokusziel oder Fokusbereich machen.

Das Beispiel gibt nur den auto- und scroll-Panels, die tatsächlich gescrollt werden müssen, Tastaturzugriff, einen Namen und eine Fokuskontur. Nach dem Betreten mit Tab prüfen Sie, ob Sie mit den Pfeiltasten oder Bild-ab zum letzten Absatz gelangen können. Auf schmalen Bildschirmen sollte außerdem sichergestellt werden, dass ein Unterschied zwischen dem Scrollen innerhalb des Panels und dem Scrollen der Seite besteht.

Führen Sie das vollständige Overflow-Beispiel aus

Speichern Sie den folgenden Code und öffnen Sie ihn als UTF-8 in overflow.html. Beinhaltet alle vier Panels desselben Inhalts, lange URLs und verkürzte Titel, um den Originaltext zu erhalten. Die example.com-Adresse dient nur als lange Zeichenfolge für den Umbruchvergleich und ist kein Link zu einer tatsächlichen Ressource.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. Vergleichen Sie die letzten Absätze der vier Panels. Bei visible steht der letzte Absatz außerhalb des Rahmens, bei hidden wird er abgeschnitten. Bei auto und scroll muss er innerhalb des Panels durch Scrollen erreichbar und lesbar sein.
2. Lassen Sie nur einen Absatz im Auto-Panel. Wenn der Inhalt kurz genug wird, prüfen Sie, ob der Scrollbereich verschwindet, und stellen Sie ihn auf vier Absätze wieder her. Beurteilen Sie nicht, ob es überläuft, nur indem Sie die Leiste sehen.
3. Wechseln Sie mit Tab zum Auto-Panel und überprüfen Sie den Inhalt unten mit den Pfeiltasten. Stellen Sie sicher, dass die Fokussierungsumrandung sichtbar ist, und benutzen Sie dann Shift+Tab, um zum vorderen Ziel zu wechseln.
4. Deaktivieren Sie overflow-wrap bei der URL und verkleinern Sie das Fenster. Prüfen Sie den horizontalen Überlauf und stellen Sie danach anywhere wieder her.
5. Ändern Sie nur text-overflow des Titels auf "clip" und vergleichen Sie die Ergebnisse, wenn der Text ohne Auslassungszeichen abgeschnitten wird. Ändern Sie anschließend "nowrap" auf "normal", um das Ergebnis des Zeilenumbruchs zu überprüfen, und stellen Sie den ursprünglichen Wert wieder her.

Wenn die gesamte Seite horizontal verschoben wird, überprüfen Sie die Mindestbreite/das Padding des breitesten Elements und seines übergeordneten Elements. Wenn der zu lesende Inhalt verschwindet, überprüfen Sie zuerst feste Höhen und overflow: hidden. Bevor Sie Scrollen oder Auslassungspunkte hinzufügen, müssen Sie bestimmen, wie der ursprüngliche Text beibehalten werden kann und ob die Darstellung mit den vorgesehenen Eingabemethoden bedient werden kann.