Wo Zeilen Umbrechen ist Kompliziert. Hier sind alle Zugehörigen CSS und HTML.

Nehmen wir an, Sie haben ein wirklich langes Wort in einem Text innerhalb eines Elements, das nicht breit genug ist, um es aufzunehmen. Eine häufige Ursache dafür ist eine lange URL, die sich in den Text einschleicht. Was passiert? Das hängt vom CSS ab. Davon, wie das CSS das Layout steuert und was das CSS dem Text sagt zu tun.

So könnte eine aus dem Rahmen fallende Textsituation aussehen

Der Text, der aus der Box ragt, ist ein visuelles Problem.

Eine Möglichkeit ist overflow: hidden;, was eine Art stumpfe Waffe ist, die den Text (oder alles andere) am Überlaufen hindert. Allerdings macht sie den Text etwas unzugänglich. In einigen Desktop-Browsern mit einer Maus können Sie möglicherweise dreimal auf die Zeile klicken, um die URL auszuwählen und zu kopieren, aber Sie können nicht davon ausgehen, dass jeder das weiß oder dass es in allen Szenarien möglich ist.

Überlauf ist hier auch das richtige Wort, da genau das passiert. Wir haben auch overflow: auto; zur Verfügung, was eine horizontale Scrollleiste auslösen würde. Vielleicht manchmal geeignet, aber ich stelle mir vor, wir sind uns alle einig, dass dies im Allgemeinen keine akzeptable Lösung ist.

Was wir wollen, ist, dass die verdammt lange URL (oder Text jeglicher Art) zur nächsten Zeile umbricht. Es gibt Optionen! Fangen wir mit einem Ort an, an dem wir versuchen können, diese Dinge herauszufinden.

Experimenteller Spielplatz

Meine Idee hier ist, eine größenveränderbare Inhaltsfläche mit einer Vielzahl von CSS-Eigenschaften/Werten zu haben, die Sie ein- und ausschalten können, um die Auswirkungen auf den Inhalt zu sehen.

Dies ist sicherlich nicht umfassend oder perfekt umgesetzt. Es sind nur einige der Eigenschaften, die mir bekannt sind.

Der Vorschlaghammer: word-break: break-all;

Erlaubt das Umbrechen von Wörtern überall. Die word-break-Eigenschaft „löst“ das Problem

p {
  word-break: break-all;
}

In einem E-Mail-Austausch mit fantasi erklärte sie, dass dies funktioniert, weil die `word-break`-Eigenschaft neu definiert, was ein Wort ist. Der Wert `break-all` behandelt nicht-CJK-Zeichen im Wesentlichen wie CJK-Zeichen, die fast überall umbrochen werden können (außer bei Dingen wie Punkten und schließenden Klammern). Der Wert `keep-all` macht das Gegenteil und behandelt CJK-Zeichen wie nicht-CJK-Zeichen.

Eine subtile Lösung: `overflow-wrap: break-word;`

Die `overflow-wrap`-Eigenschaft scheint die effektivste Lösung für die Probleme zu sein, die wir dargelegt haben.

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

Auf den ersten Blick mag es der `word-break: break-all;`-Demo oben sehr ähnlich sehen, aber beachten Sie, wie bei der URL anstatt "pen" in "pe\n" zu zerlegen, dort am Ende des Wortes gebrochen wird, wo der Schrägstrich ist. Besser.

fantasai erklärte

„Wenn ein Wort nicht umgebrochen werden kann und somit überlaufen würde, dann kann es überall umgebrochen werden, um Überlauf zu vermeiden.“

Eine schwerere Lösung, manchmal: hyphens: auto;

Die `hyphens`-Eigenschaft tut, was man erwarten würde…sie erlaubt Silbentrennung bei Zeilenumbrüchen. Silbentrennungen können manchmal bei URLs und langen Wörtern helfen, aber es ist nicht garantiert. Eine lange Zahl würde sie zum Beispiel ins Stocken bringen. Außerdem beeinträchtigt die Silbentrennung den gesamten Text und bricht Wörter großzügiger, um den Text gleichmäßig am rechten Rand zu halten.

p {
  hyphens: auto;
}

fantasai sagte mir

Wenn ein „Wort“ das Ende der Zeile überspannt, können wir es silbentrennen.

Ich schätze, „Wort“ hilft, das Problem zu greifen. Einige problematisch lange Zeichenketten sind keine „Wörter“, daher kann man sich nicht darauf verlassen, dass sie alle Überlaufprobleme lösen.

Zukünftiger Vorschlaghammer: line-break: anywhere;

Es gibt eine Eigenschaft namens line-break. Sie ist angeblich hauptsächlich für Satzzeichen gedacht, aber ich kann sie in keinem Browser zum Laufen bringen. fantasai sagt mir, dass es einen neuen Wert namens `anywhere` geben wird, der

wie word-break: break-all; ist, außer dass er tatsächlich alles wie ein dummer Terminal-Client umbricht.

Anderes HTML-Zeug

• Das `<br>`-Element bricht eine Zeile, wo immer es gerendert wird. Es sei denn, es ist display: none;!
• Das `<wbr>`-Element ist eine „Wortumbruchmöglichkeit“, was bedeutet, dass ein langes Wort, das normalerweise ein störendes Überlaufproblem verursachen würde, mitgeteilt werden kann, dass es in Ordnung ist, an einer bestimmten Stelle umzubrechen. Nützlich! Es verhält sich wie ein Nullbreiten-Leerzeichen.

Anderes CSS-Zeug

• Das `&shy;`-Zeichen ist genau wie das <wbr>-Element.
• Sie können einen Zeilenumbruch über ein Pseudo-Element wie ::before { content: "\A"; } einfügen, solange das Element nicht inline ist (oder wenn es inline ist, benötigt es white-space: pre;)