DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft white-space steuert, wie Text in dem Element, auf das sie angewendet wird, behandelt wird. Nehmen wir an, Sie haben HTML, das *genau* so aussieht:
<div>
A bunch of words you see.
</div>Sie haben dem Div eine feste Breite von 100 Pixeln zugewiesen. Bei einer angemessenen Schriftgröße ist das zu viel Text, um in 100px zu passen. Ohne jegliche Anpassung ist der Standardwert für white-space normal und der Text wird umgebrochen. Sehen Sie das Beispiel unten oder folgen Sie zu Hause mit der Demo.
div {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
Wenn Sie verhindern möchten, dass der Text umgebrochen wird, können Sie white-space: nowrap; anwenden.
Beachten Sie im HTML-Code-Beispiel oben in diesem Artikel, dass es tatsächlich zwei Zeilenumbrüche gibt, einen vor der Textzeile und einen danach, die es dem Text ermöglichen, auf einer eigenen Zeile zu stehen (im Code). Wenn der Text im Browser gerendert wird, erscheinen diese Zeilenumbrüche, als wären sie entfernt worden. Ebenso entfernt werden die zusätzlichen Leerzeichen auf der Zeile vor dem ersten Buchstaben. Wenn wir den Browser dazu zwingen möchten, diese Zeilenumbrüche und zusätzlichen Leerzeichen anzuzeigen, können wir white-space: pre; verwenden.
Es heißt pre, weil das Verhalten so ist, als ob Sie den Text in <pre></pre>-Tags eingeschlossen hätten (die standardmäßig Leerzeichen und Zeilenumbrüche auf diese Weise behandeln). Leerzeichen werden exakt so beibehalten, wie sie im HTML stehen, und der Text wird erst umgebrochen, wenn ein Zeilenumbruch im Code vorhanden ist. Dies ist besonders nützlich, wenn Sie buchstäblich Code anzeigen, der von einer gewissen Formatierung ästhetisch profitiert (und manchmal absolut entscheidend ist, wie in von Leerzeichen abhängigen Sprachen!)
Vielleicht gefällt Ihnen, wie pre Leerzeichen und Umbrüche beibehält, aber Sie benötigen, dass der Text umgebrochen wird, anstatt potenziell aus seinem übergeordneten Container auszubrechen. Dafür ist white-space: pre-wrap; gedacht.
Schließlich bricht white-space: pre-line; Zeilen dort um, wo sie im Code umbrechen, aber zusätzliche Leerzeichen werden trotzdem entfernt.
Interessanterweise wird der letzte Zeilenumbruch nicht beibehalten. Gemäß der CSS 2.1-Spezifikation: "Zeilen werden an beibehaltenen Zeilenumbruchzeichen und nach Bedarf zur Füllung von Zeilenfeldern umgebrochen", sodass dies vielleicht Sinn ergibt.
Hier ist eine Tabelle, um die Verhaltensweisen aller verschiedenen Werte zu verstehen
| Neue Zeilen | Leerzeichen und Tabs | Textumbruch | |
|---|---|---|---|
normal | Kollabieren | Kollabieren | Umbrechen |
pre | Beibehalten | Beibehalten | Kein Umbruch |
nowrap | Kollabieren | Kollabieren | Kein Umbruch |
pre-wrap | Beibehalten | Beibehalten | Umbrechen |
pre-line | Beibehalten | Kollabieren | Umbrechen |
In CSS3 wird die Eigenschaft white-space buchstäblich dieser Tabelle folgen und die Eigenschaften entsprechend text-space-collapse und text-wrap zuordnen.
Weitere Informationen
- CSS
white-spaceProperty (DigitalOcean) - So verhindern Sie Zeilenumbrüche mit CSS (DigitalOcean)
- Mozilla Docs
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 8+ | Alle | Alle | Alle | Alle | Alle |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle |
Chris, Sie scheinen ein Clipping-Problem mit der IE-Bildsprite zu haben. Versuchen Sie, die Breite zu erhöhen, da sie die breiteste von allen ist.
+1
Tolle Sachen, Bro!
Korrigieren Sie den Tippfehler, wenn Sie Zeit haben :)
wefrgthyjuk
asdasdasdasdf
Was ist, wenn Sie ein Element mit einer bestimmten Breite haben und es ein einzelnes Wort enthält, das breiter ist als die Box? Gibt es eine Möglichkeit – abgesehen von der Hinzufügung von JavaScript –, das Wort so umzubrechen, dass es mit einem Bindestrich in die Box passt?
Wenn nicht, sollte dies unbedingt in der nächsten CSS-Runde berücksichtigt werden ... meiner Meinung nach.
Ich habe das hier gefunden – http://www.w3.org/TR/css3-text/#hyphens – Könnten Sie es bitte erklären? Und vielleicht einige Browserkompatibilitätstests, wenn Sie Zeit haben?
Danke!
Gibt es eine Möglichkeit, den Text vor einem Wort umzubrechen, anstatt ihn in der Mitte zu trennen (außer durch manuelles Einfügen eines Umbruchs <br>)?
@ Kevin – Chris hat eine weitere Ressource, die sich damit beschäftigt (aber meine Frage meiner Meinung nach nicht beantwortet): Verhindern, dass lange URLs aus dem Container ausbrechen
Danke Tim! Das ist nützlich.
@Tim Osborn, einige nützliche Antworten zur Textumbruchkontrolle auf SO, insbesondere zwei von meinen (;-), http://stackoverflow.com/a/6298738/736006 und http://stackoverflow.com/a/6508168/736006.
@Chris (und alle!), hat jemand eine bessere Antwort darauf, wie man Leerzeichen vollständig verwirft, als diese: http://stackoverflow.com/a/2629446/736006
(Danke, tolle Seite!)
(Entschuldigung, habe vergessen, mich zu abonnieren, das geht anscheinend nicht ohne Kommentar.)
Hallo, ich versuche, etwas sehr Grundlegendes zu tun; ich möchte, dass der XSLT-Code in Visual Studio genauso aussieht wie auf dem resultierenden PDF, damit ich keine Zeit mit „Versuch und Irrtum“ verschwenden muss, wenn ich die Felder in VS abstände, um sie auszurichten, z.B.
Kontonummer: 6319469991655135
Guthaben: £51,28
Darlehenszahlung: £0,00
z.B. das möchte ich tun können – also ist ein Leerzeichen in XSLT ein Leerzeichen im PDF
Kontonummer:
Guthaben: £
Darlehenszahlung: £
Können Sie helfen?
hhhhhhhhhhh
guter Artikel.
Bitte beachten Sie, dass pre-wrap und pre-line bei IE 8.0x nicht zu funktionieren scheinen.
Ich bin zum folgenden Doctype gewechselt, in der Hoffnung, dass dies das Problem war. Aber pre-wrap funktioniert in anderen Browsern einwandfrei.
In Ihrem Text steht etwas
aber es sollte heißen
Danke, behoben. Wird wegen mangelnder Wichtigkeit für diesen Kommentar-Thread beerdigt.
Können Sie bitte „CSS-Attribute und Elemente unterscheiden“ erklären?
Eine wichtige Sache. Der W3C-Validator markiert white-space: nowrap; als nicht existierend in CSS3 und meldet es als Fehler.
Vielen Dank für die Zusammenfassung in einfacher Sprache.
Gutes Dokument.
font-family: monospace;
white-space: pre;
Mit dem obigen Code kann ich das `pre` in Firefox beibehalten. Aber in IE9 und IE8 wird es zu einer einzigen Zeile. Es scheint die neuen Zeilen nicht beizubehalten. Irgendwelche Ideen zur Behebung?
Großartiges Dokument übrigens!
Ich habe dasselbe Problem mit IE. white-space: pre-wrap funktioniert in IE9 nicht. Bin mir nicht sicher bezüglich anderer IE-Versionen. Funktioniert in Chrome gut. Irgendwelche Ideen, wie man es in IE zum Laufen bringt???
Wenn ich white-space:Pre-line verwende, wird eine zusätzliche Zeile am Anfang des Textbereichs hinzugefügt. Gibt es eine Möglichkeit, die hinzugefügte zusätzliche Zeile zu entfernen?
Das haben Sie wahrscheinlich schon herausgefunden, aber falls jemand anderes hierher kommt – es liegt daran, dass Sie zwei Umbrüche haben. Je nach Word-Wrap-Einstellung Ihrer IDE kann es schwierig sein zu erkennen, wo ein manueller Umbruch platziert wurde. Es sollten keine zusätzlichen Umbrüche zwischen den Zeilen sein, sonst wird dies vom CSS übernommen.
d. h.
Eine angemessene
Verwendung von pre-line
die jede
Zeile umbrechen wird.
vs.
Eine wahrscheinlich unerwünschte
Verwendung von pre-line, die eine visuelle Unterscheidung schafft
für den Benutzer, aber das CSS verwirrt.
Ich liebe diese Seite einfach. Es scheint, als würde ich dreimal pro Woche hier landen und gute Antworten auf Probleme finden, die ich habe. Danke und machen Sie weiter so.
Hallo Leute,
Ich bin kein Geek, also helft mir bitte. Ich benutze WordPress. Wenn ich nach einem Punkt zweimal die LEERTASTE drücke, wird die zweite oder (n-te) Zeile eines Absatzes eingerückt und nicht linksbündig ausgerichtet. Das passiert nur, wenn ich zweimal die LEERTASTE drücke (nach dem vorherigen Satz) gegen Ende der vorherigen Zeile, wo der Text auf die zweite Zeile umgebrochen wird. Fehlt etwas in meinem CSS-Stylesheet?
Hat jemand anderes Probleme mit white-space: pre?
Wenn ich es in Chrome 34.0.1847.137 in einem Textbereich verwende, wird der Text immer noch umgebrochen... obwohl unter „Textumbruch“ steht, dass dies nicht der Fall sein sollte.
Neue Zeilen, Leerzeichen, Tabs usw. verhalten sich alle wie erwartet... aber lange Zeilen werden immer noch umgebrochen :(
Könnte dies ein Verhalten sein, das nur für Textbereiche spezifisch ist?
Gute Arbeit, sehr guter Tipp. Grüße aus Mexiko.
Danke! Sie versüßen mir den Tag!
Mann, ich kann dir nicht sagen, wie oft ich im Web nach Lösungen oder Teillösungen suche und keine Antwort finde, bis ich auf css-tricks lande. Danke, dass Sie all die Male da waren, Mann. Machen Sie weiter so.
Kann mir jemand das Verhalten erklären, das ich sehe? Ich bin dem Artikel gefolgt, und es macht Sinn, dass es 2 Zeilenumbrüche im HTML gibt und warum das Beispiel mit
white-space: preeine Leerzeile sowohl vor als auch nach dem Text anzeigt. Wenn ich das versuche, sehe ich jedoch nur eine leere Zeile über dem Text.Hier ist mein Fiddle: https://jsfiddle.net/2wm7v5pc/
Entschuldigung, ich kann nicht bearbeiten. Ich habe dies ursprünglich auch auf Codepen versucht: http://codepen.io/adam-beck/pen/oYyEOd. Aus irgendeinem Grund wird danach immer noch keine leere Zeile hinzugefügt, obwohl ein Zeilenumbruch im HTML vorhanden ist.
Test
VIELEN DANK! Das ist genau das, wonach ich gesucht habe. Zuerst habe ich versucht,
Tags zu verwenden, um den aus meiner SQL-Datenbank abgerufenen Text einzuschließen. Dann hatte ich ein neues Problem, weil der Text nicht mit der richtigen Schriftart formatiert war. Dann habe ich Inline-Styling mit style=”white-space: pre” versucht. Dann hatte ich ein neues Problem, weil der Text nicht umgebrochen wurde. ENDLICH habe ich Ihren Blog gefunden und style=”white-space: pre-wrap” ausprobiert, was mir das Leben gerettet hat. Danke für Ihr einfaches Tutorial/Ihre Erklärung.
Ich habe einen langen Satz, der sich gut umbrechen lässt, aber Wörter mit Bindestrich trennt; wie kann ich das verhindern?
Diese funktionieren scheinbar nicht in Tabellenzellen.
Ich habe einige Daten mit „/“-Zeichen und einem „&“-Zeichen zwischen Wörtern (nicht alle Daten, nur einige Elemente davon). Wenn die Informationen in Tabellenzellen (th oder td) ohne weitere Formatierung platziert werden, erstrecken sie sich aus der Zelle heraus (verdecken andere Informationen und sehen im Grunde schrecklich aus).
Wenn ich word-break: break-all anwende, bricht es ab, wenn der Platz ausgeht, aber nicht an einem logischen Punkt
Öffnen/P
Pfad
Ich habe ein Leerzeichen vor und nach dem „/“ hinzugefügt, aber es behandelt alles als Leerzeichen, scheint es, und reduziert es auf nur „/“. (Es sieht identisch mit dem obigen aus.)
Wenn ich white-space: pre-wrap verwende, kehrt es nur in den Zustand zurück, in dem es sich über die Zelle hinaus erstreckt und schrecklich aussieht. Darüber hinaus behält es nicht einmal die Leerzeichen bei!
Was fehlt mir?