Wie deaktiviere ich den Zeilenumbruch in HTML?

517

Ich fühle mich albern, weil ich das nicht herausfinden kann, aber wie schalte ich den Zeilenumbruch aus? Die CSS- word-wrapEigenschaft kann mit aktiviert break-word, aber nicht deaktiviert werden (kann nur mit normalvalue allein gelassen werden).

Wie erzwinge ich Zeilenumbruch aus ?

html css word-wrap Alexander Bird
quelle

Antworten:

852

Sie müssen das CSS- white-spaceAttribut verwenden.

Insbesondere white-space: nowrapund white-space: presind die am häufigsten verwendeten Werte. Der erste scheint das zu sein, wonach Sie suchen.

Jon
quelle
25

Webkit-spezifische Werte hinzugefügt, die oben fehlen

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */
Matas Vaitkevicius
quelle
3

Ich frage mich, warum Sie als Lösung den "Leerraum" mit "nowrap" oder "pre" finden, er macht nicht das richtige Verhalten: Sie erzwingen Ihren Text in einer einzigen Zeile! Der Text sollte Zeilen brechen, aber standardmäßig keine Wörter. Dies wird durch einige CSS-Attribute verursacht: Zeilenumbruch, Überlaufumbruch, Wortumbruch und Bindestriche. Sie können also entweder:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Die Lösung besteht also darin, sie zu entfernen oder mit "nicht gesetzt" oder "normal" zu überschreiben:

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

UPDATE: Ich biete auch Beweise mit JSfiddle: https://jsfiddle.net/azozp8rr/

zod
quelle
1
Ich verstehe, warum Sie generell mit Worten brechen wollen. Aber anzunehmen, dass es keinen triftigen Grund gibt, den Zeilenumbruch zu deaktivieren, macht für mich keinen Sinn. Ich habe schnell versucht, Ihre "nicht eingestellte" Lösung zu testen, und sie hatte immer noch einen Zeilenumbruch. Wenn Sie der Meinung sind, dass es funktionieren sollte, geben Sie bitte eine jsfiddle-Demo an, in der es funktioniert.
Alexander Bird
Ich weiß nicht, warum meine Antwort verschwunden ist. Auch hier können Sie Nowrap erzwingen, normalerweise tun es die Leute für Schaltflächen. Aber ich denke, es ist ein schlechtes Design aus reaktionsschnellen Gründen, weil Texte außerhalb des Containers gehen könnten. Wie auch immer, die Frage war nach dem Zeilenumbruch: Break-Word, erzwungen, und Sie fragten, wie man es abzwingt. Also habe ich den Code dafür bereitgestellt. Das Leerzeichen: Nowrap ist eine andere Sache, und es entfernt nicht brechende Wörter, es entfernt brechende ganze Zeilen. Außerdem biete ich einen Vergleich des Codes mit JSfiddle an: https://jsfiddle.net/azozp8rr/
zod
2

Dies hat bei mir funktioniert, um zu verhindern, dass alberne Arbeitspausen in Chrome-Textbereichen auftreten

word-break: keep-all;
Ryan Charmley
quelle