pTags werden standardmäßig automatisch umgebrochen, sodass nach dem Festlegen der Breite der Effekt gut erzielt werden kann. In einem kürzlichen Projekt wurde jedoch festgestellt, dass nach dem Laden von Daten mit ajax,pder Inhalt innerhalb des Tags nicht umgebrochen wurde, was zu Layout-Verwirrung führte. Also versuchte ich, den Zeilenumbruch-Stil zu verwenden. Obwohl es das Problem löste, fand ich die Grundursache nicht heraus. Der Kern ist, dass die Daten, die ich damals erhielt, eine lange Zeichenkette aus Zahlen waren. Der Browser behandelt Zahlen und englische Wörter ähnlich und trennt sie nicht.

Zuerst werden die verschiedenen Methoden vorgestellt, dann wird jede Eigenschaft im Detail erläutert.

Erzwungenes Nicht-Umbruch:

p { white-space:nowrap; }

Automatischer Umbruch:

p { word-wrap:break-word; }

Erzwungener Umbruch englischer Wörter:

p { word-break:break-all; }

Hinweis:Um englische Wörter zum Umbruch zu zwingen, müssen Sie das Inline-Element als Block-Level-Element festlegen.

Überlauf zeigt Auslassungspunkte:

p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 

• white-space: Die Eigenschaft legt fest, wie Leerzeichen innerhalb eines Elements behandelt werden.
• normal: Standard. Leerzeichen werden vom Browser ignoriert.
• pre: Leerraum wird vom Browser beibehalten. Es verhält sich ähnlich wie das pre-Tag in HTML.
• nowrap: Text wird nicht umgebrochen; er läuft in derselben Zeile weiter, bis er auf ein br-Tag trifft.
• pre-wrap: Behält die Abfolge von Leerraumzeichen bei, bricht Zeilen aber normal um.
• pre-line: Fasst Folgen von Leerraumzeichen zusammen, behält aber Zeilenumbruchzeichen bei.
• inherit: Legt fest, dass der Wert der white-space-Eigenschaft vom übergeordneten Element geerbt werden soll.

word-wrap: normal|break-word; 

• word-wrap: Die Eigenschaft wird verwendet, um anzugeben, ob der Browser Wörter innerhalb eines Wortes umbrechen darf. Dies dient dazu, Überlauf zu verhindern, wenn eine Zeichenkette zu lang ist, um ihren natürlichen Umbruchpunkt zu finden.
• normal: Zeilen nur an erlaubten Umbruchpunkten umbrechen (der Browser behält die Standardbehandlung bei).
• break-word: Zeilen innerhalb langer Wörter oder URL-Adressen umbrechen.

word-break: normal|break-all|keep-all;

• Die word-break-Eigenschaft wird verwendet, um anzugeben, wie Wörter innerhalb eines Wortes umbrochen werden.
• normal: Verwendet die Standard-Zeilenumbruchregeln des Browsers.
• break-all: Erlaubt Zeilenumbrüche innerhalb von Wörtern.
• keep-all: Kann nur an halbbreiten Leerzeichen oder Bindestrichen umbrechen.