Umgang mit langen Wörtern und URLs (Erzwingen von Umbrüchen, Silbentrennung, Auslassungspunkten usw.)

Es gibt Zeiten, in denen eine sehr lange Textzeichenfolge den Container eines Layouts überlaufen kann.

Zum Beispiel:

Hier ist ein großes Snippet mit allen beteiligten CSS-Playern

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Das würde das Problem für uns lösen

Hier ist die Erklärung

• overflow-wrap: break-word; sorgt dafür, dass lange Zeichenfolgen umbrechen und nicht aus dem Container ausbrechen. Sie können auch word-wrap verwenden, da laut Spezifikation beides einfach alternative Namen füreinander sind. Einige Browser unterstützen das eine und nicht das andere. Firefox (getestet v43) unterstützt nur word-wrap. Blink (getestet Chrome v45) akzeptiert beides.
• Wenn overflow-wrap allein verwendet wird, brechen Wörter fast überall, wo es nötig ist. Wenn es ein „akzeptables Trennzeichen“ gibt (wie zum Beispiel ein Bindestrich), wird dort getrennt, ansonsten macht es einfach, was es tun muss.
• Sie könnten auch hyphens verwenden, denn dann wird versucht, geschmackvoll einen Bindestrich hinzuzufügen, wo getrennt wird, falls der Browser dies unterstützt (Blink tut dies zum Zeitpunkt des Schreibens nicht, Firefox schon).
• word-break: break-all; weist den Browser an, dass es in Ordnung ist, das Wort überall zu trennen, wo es nötig ist. Obwohl er das ohnehin irgendwie tut, bin ich mir nicht sicher, in welchen Fällen es zu 100 % notwendig ist.

Wenn Sie bei der Silbentrennung manueller vorgehen möchten, können Sie diese in Ihrem Markup vorschlagen. Mehr dazu finden Sie auf der MDN-Seite.

Browser-Unterstützung

Für word-break

Für hyphens

Für overflow-wrap

Für text-overflow

Überlauf mit Ellipsen verhindern

Ein weiterer Ansatz ist, den Text komplett abzuschneiden und Ellipsen hinzuzufügen, wo die Textzeichenfolge den Container erreicht

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Das Schöne an der Verwendung von text-overflow ist, dass es universell unterstützt wird.

Beispiele

Siehe den Pen lange Wörter mit Silbentrennung von CSS-Tricks (@css-tricks) auf CodePen.

Siehe den Pen Ellipsen von CSS-Tricks (@css-tricks) auf CodePen.

Siehe den Pen Zeilenumbruch herausfinden von Chris Coyier (@chriscoyier) auf CodePen.

Weitere Ressourcen

• Michael Scharnagl: Umgang mit langen Wörtern in CSS
• Kenneth Auchenberg: Wortumbruch/Silbentrennung mit CSS
• MDN: word-wrap, word-break, hyphens
• Spezifikation: CSS Text Level 3

Für SCSS-affine

Dies sind die Arten von Dingen, die man bei Bedarf in den Code einstreut, daher eignen sie sich gut für @mixins

@mixin word-wrap() {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}