Wo Linien zu Brechen ist Kompliziert. Hier die dazugehörigen CSS-und HTML-Format.

0
44

Angenommen, Sie haben ein wirklich langes Wort innerhalb eines Textes in einem element, das nicht breit genug ist, um es zu halten. Eine häufige Ursache ist, dass eine lange URL zu finden in Kopie. Was passiert? Es hängt von der CSS. Wie das CSS-Steuerung des layout und was die CSS sagt dem text zu tun.

Dies ist, was ein break-out-text-situation Aussehen könnte:

Der text hanging out of the box ist ein optisches problem.

Eine Möglichkeit ist overflow: hidden; das ist ein bisschen ein stumpfes Waffe, das wird verhindern, dass der text (oder etwas anderes) aus dem hängen heraus. Doch, es macht den text ein wenig unzugänglich. In einigen desktop-Browsern mit einer Maus, die Sie möglicherweise in der Lage, triple-klicken Sie auf die Zeile, wählen Sie die URL und kopieren Sie Sie, aber Sie können nicht damit rechnen, dass es jeder weiß, oder, dass es möglich ist in allen Szenarien.

Überlauf ist das richtige Wort hier ebenso, wie das ist genau das, was passiert ist. Wir haben overflow: auto; zur Verfügung als auch, was auslösen würde eine horizontale Bildlaufleiste. Vielleicht geeignet, manchmal, aber ich glaube, wir werden alle Zustimmen, dass das nicht in der Regel eine akzeptable Lösung.

Was wir wollen, ist das dang long URL (oder text jeglicher Art) zu brechen, um die nächste Zeile. Es gibt Optionen! Wir beginnen mit einem Ort, um zu versuchen, herauszufinden Dinge aus.

Experimentelle Spielwiese

Meine Idee hier ist, um ein skalierbarer panel-Inhalte verbunden mit einer Vielzahl von CSS-Eigenschaften/Werte, die Sie in sich ein-und ausschalten um die Effekte zu sehen, die auf den Inhalt.

Dies ist keine umfassende oder perfekt ausgeführt, ich bin sicher. Es ist nur einige der Eigenschaften, die ich bin mir dessen bewusst.

Finden Sie den Stift Herauszufinden, der Textumbruch, die von Chris Coyier (@chriscoyier) auf CodePen.

Der Vorschlaghammer: “Wort-break: break-all;`

Können Worte, um gebrochen zu werden überall. Die word-break-Eigenschaft wird die “Lösung” des Problems:

p {
Wort-break: break-all;
}

In einer E-Mail-Austausch mit fantasi, erklärte Sie, dass dies funktioniert, da die word-break-Eigenschaft definiert, was ein Wort ist. Der Pause-alle Wert behandelt im wesentlichen nicht-CJK-wie CJK, die brechen kann fast überall (außer Sachen wie Fristen und schließende Klammer). Die halten-alle Wert das Gegenteil tut, der Behandlung von CJK-als nicht-CJK.

Eine Subtile Update: `overflow-wrap: break-word;`

Das overflow-wrap-Eigenschaft zu sein scheint die effektivste Lösung für die Probleme, die wir haben angelegt:

p {
word-wrap: break-word; /* alte Bezeichnung */
overflow-wrap: break-word;
}

Auf den ersten Blick sieht es vielleicht sehr ähnlich wie die word-break: break-all; demo oben, aber beachten Sie, wie in der URL anstatt zu brechen “pen” bei “pen”, bricht es am Ende des Wortes, wo der Schrägstrich ist. Schöner.

fantasai erklärt:

“Wenn ein Wort nicht brechen, und deshalb würde der überlauf, dann kann es zu brechen irgendwo, um zu vermeiden, überlauf.”

Ein Schwerer Beheben, Manchmal: `Bindestriche: auto;`

Die Bindestriche Eigenschaft tut, was Sie erwarten könnte…können die für die Silbentrennung in Zeilenumbrüche. Bindestriche können manchmal den trick URLs und lange Wörter, aber es ist nicht garantiert. Eine lange Reihe würde die Reise bis zum Beispiel. Plus, Bindestriche wirken sich auf den gesamten text, brechen Wörter mehr liberal zu helfen, text, umarmen, rechten Rand gleichmäßig.

p {
Bindestriche: auto;
}

fantasai sagte mir:

“Wenn ein” Wort ” bewegt sich an das Ende der Zeile, wir können uns trennen.”

Ich denke, “Wort”, das hilft, legen Sie einen finger auf das Problem gibt. Etwas problematischer ist lange strings sind nicht “die Wörter” so kann es nicht auf gezählt werden, um zu lösen alle überlauf-Probleme.

Zukunft Sledgehammer: `line-break: überall;`

Es ist eine Eigenschaft, die man als line-break. Es ist vor allem für die Interpunktion, offenbar, aber ich kann nicht scheinen, um zu sehen, es funktioniert in jedem browser. fantasai sagt mir es wird ein neuer Wert namens überall, das ist:

“wie Wort-break: break-all; außer es bricht tatsächlich alles wie ein dumb terminal-client”

.

Andere HTML Zeug

  • Das <br> – element einen Zeilenumbruch, wo es macht. Es sei denn, es ist display: none;!
  • Das element ist eine “word-break Chance” bedeutet ein langes Wort, das normalerweise dazu führen würde eine lästige überlauf Thema gesagt werden könnte, dass es ok ist zu brechen an einem bestimmten Punkt. Nützlich ist! Es verhält sich wie ein zero-width space.

Andere CSS-Zeug

  • Die &shy; – Zeichen ist genau wie das <wbr> – element.
  • Können Sie Spritzen einen Zeilenumbruch via Pseudo elmement wie ::before { content: “A”; } solange elment nicht-inline (oder wenn es ist, es muss white-space: pre;)