DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die word-break-Eigenschaft in CSS kann verwendet werden, um zu ändern, wann Zeilenumbrüche auftreten sollen. Normalerweise können Zeilenumbrüche in Texten nur an bestimmten Stellen auftreten, z. B. wenn ein Leerzeichen oder ein Bindestrich vorhanden ist.
Im folgenden Beispiel können wir den word-break zwischen Buchstaben stattdessen erzwingen.
.element {
word-break: break-all;
}Wenn wir dann die Breite des Textes auf ein em einstellen, wird das Wort bei jedem Buchstaben umgebrochen.
Siehe den Pen Text vertikal mit word-break setzen von CSS-Tricks (@css-tricks) auf CodePen.
Dieser Wert wird oft in Bereichen mit benutzergenerierten Inhalten verwendet, damit lange Zeichenketten nicht das Layout beeinträchtigen. Ein sehr häufiges Beispiel ist eine lange kopierte URL. Wenn diese URL keine Bindestriche enthält, kann sie über den umgebenden Kasten hinausgehen und schlecht aussehen oder schlimmer noch, Layoutprobleme verursachen.
Siehe den Pen Links mit word-break reparieren von CSS-Tricks (@css-tricks) auf CodePen.
Werte
normal: Verwenden Sie die Standardregeln für den Zeilenumbruch.break-all: Jedes Wort/jeder Buchstabe kann in die nächste Zeile umgebrochen werden.keep-all: Für chinesischen, japanischen und koreanischen Text werden Wörter nicht umgebrochen. Andernfalls ist dies dasselbe wienormal.
Diese Eigenschaft wird auch oft in Verbindung mit der hyphens-Eigenschaft verwendet, sodass beim Umbruch ein Bindestrich eingefügt wird, wie es in Büchern üblich ist.
Die vollständige Verwendung mit den erforderlichen Vendor-Präfixen lautet:
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;Die Verwendung dieser Eigenschaften für den universellen Selektor kann nützlich sein, wenn Sie eine Website mit vielen benutzergenerierten Inhalten haben. Aber Vorsicht, es kann bei Titeln und vorformatiertem Text seltsam aussehen (
Verwandt
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 7.0-7.1 |
Safari und iOS unterstützen den Wert break-all, aber nicht keep-all.
Es scheint, dass "webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;" keine Wirkung haben. Und gibt es die Eigenschaft hyphens in der CSS-Spezifikation?
Ich habe das gleiche Problem, Jiayang...
Sie haben nicht eingegeben
-webkit-hyphens: auto;stattdessen haben Sie eingegeben
webkit-hyphens:auto;Dort liegt Ihr Fehler. Wenn Sie einen Fehler in CSS machen, werden alle nachfolgenden Stile ignoriert.
Chrome unterstützt es nicht.
http://caniuse.com/css-hyphens
Anscheinend unterstützt IE10 die präfixierte hyphens-Eigenschaft, daher wäre eine vollständigere eine:
IE8 führte -ms-word-break als Synonym für word-break ein. Verwenden Sie nicht das -ms-Präfix.
^ Von: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
Anscheinend sollte die Unterstützung in Firefox nein sein, anstatt ja.
Firefoc 41.0.2 unter OSX 10.11 El Capitan zeigt in Ihrem Beispiel keinen Zeilenumbruch. Safari und Chrome schon.
Hier dasselbe, funktioniert nicht in Firefox unter Mac!
Funktioniert auch nicht in Firefox unter Windows.
Halt die Klappe
Hinweis: Hyphens in ie10 nicht unterstützt
Das obige Beispiel für die Silbentrennung ist falsch.
Damit Firefox die automatische Silbentrennung unterstützt, muss das Verhalten von word-break auf normal gesetzt sein.
word-break: normalSilbentrennung wird in Chrome nicht unterstützt. Sie können Wörter in Chrome umbrechen, ohne Firefox zu beeinträchtigen, indem Sie die Chrome-spezifische Notation
word-break: break-wordverwenden.Schauen Sie sich dieses Codepen in Firefox und Chrome an.
Gibt es eine Möglichkeit, dass ein Wort nur dann umbricht, wenn es die Zeile überläuft? Anstatt jedes Wort am Ende der Zeile umzubrechen, unabhängig von seiner Länge?
Dieser Code funktioniert für mich wunderbar.
white-space: pre-wrap; /* css-3 /
white-space: -moz-pre-wrap; / Mozilla, seit 1999 /
white-space: -pre-wrap; / Opera 4-6 /
white-space: -o-pre-wrap; / Opera 7 /
word-wrap: break-word; / Internet Explorer 5.5+ */
In Firefox funktioniert word-break nicht für Inline-Elemente.
CSS
.break {
word-break: break-all;
display:block;
}
Der Parameter "word-break : break-all" ist auch nützlich für das Schreiben in Runenschrift, die Zeilenumbrüche innerhalb von Wörtern ermöglicht.
Funktioniert nicht mit Punkten :-(
Danke! Das löst das Problem des abgeschnittenen mittleren Wortes, das ich hatte ;-)
Ich bekomme immer noch eine beträchtliche Menge an Traffic für eine alte Antwort auf Stack Overflow https://stackoverflow.com/questions/8186743/what-is-the-best-way-to-break-html-text-on-slashes/21780096#21780096 bezüglich des Umbrechens von URLs an Schrägstrichen ...
... gibt es Gedanken, die man 2021 hinzufügen kann?
tl;dr 2014 schlug ich das Einfügen eines
<wbr>oderNull-Breiten-Leerzeichens vor (das beim Kopieren und Einfügen in den Browser umgebrochen werden kann).Ich würde gerne darauf reagieren
Unsere Website hat diese 3 Sprachen (mit Englisch und Französisch). Wir hatten Beschwerden von unseren japanischen und chinesischen Freunden bezüglich der Verwendung von
keep-all. Koreanisches Feedback besagt, dass es mitkeep-allbesser ist.Mein Rat wäre also, es nur für Koreanisch zu verwenden. Ich implementiere es mithilfe der :lang-Pseudoklasse (erfordert ein korrektes
lang-Attribut deshtml-Tags).