Wie man einen Linienbruch in einem langen Wort in einem Div erzwingt

Es gibt Tabellen und Felder, die über DIV in HTML -Dokumenten erstellt wurden, die Textinformationen enthalten. Das Problem tritt auf, wenn es ein großes Wort mit einer großen Anzahl von Zeichen gibt, und aus diesem Grund fließt der Text aus dem Container, der die Grenze des Containers vernachlässigt.

CSS-Word-Wrap-Eigenschaft, die den geschriebenen Text automatisch formatiert, indem das lange Wort bei Bedarf in Teile zerlegt wird. Der "ZeilenumbruchDie Eigenschaft bewegt die Teile des Wortes nach der Größe des Behälters in die nächste Zeile.

Erzwingen einer Zeilenpause in einem langen Wort in einem Div

Fügen Sie einfach die Word-Wrap-Eigenschaft mit dem Word-Wert/-attribut des Break-Words im CSS-Stil hinzu, das sich auf die DIV bezieht.

Syntax
Die genaue Syntax zum Hinzufügen der Word-Wrap-Eigenschaft lautet wie folgt:

WORT-WRAP: Breakwort;

Problem: Inhalt überläuft die Div

Lassen Sie uns dies mit Hilfe eines einfachen Beispiels eines Divs, das den Text mit einem langen Wort im Inneren hat, diskutieren:

ITHOUT WORT-WRAP: BREAK-WORD-Element

Das Zeilenumbruchelement in HTML -Format formatiert den geschriebenen Text automatisch, indem das lange Wort mit vielen Zeichen bei Bedarf in Teile zerlegt wird. Zum Beispiel, wenn es eine veeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyyyyyyyy Long Word gibt

Dadurch wird das folgende Ergebnis der Ausgabe angezeigt. Dies sieht sehr problematisch aus, da der Text aus dem Div überfließt:

Lösung: Hinzufügen von Eigenschaften "Word-Wrap"

Wenn wir nun denselben Div -Container mit demselben Text in diesem Beitrag in diesem Beitrag nehmen:

Mit Wortschreibe: Break-Wort-Element

Das Zeilenumbruchelement in HTML -Format formatiert den geschriebenen Text automatisch, indem das lange Wort mit vielen Zeichen bei Bedarf in Teile zerlegt wird. Zum Beispiel, wenn es eine veeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyyyyyyyy Long Word gibt

Jetzt, im CSS-Stilelement, muss sich nur auf die Div-Klasse, ID oder Attribut beziehen, in der das lange problematische Wort geschrieben wurde, und dann einfach die Word-Wrap-Eigenschaft hinzufügen:

.Klasse 2
WORT-WRAP: Breakwort;

Dies ist die Ausgabe, die über den obigen Code -Snippet erzeugt wird. Dies sieht jetzt präsentierbar aus, da die Word-Wrap-Eigenschaft die Textzeichen in mehrere Zeilen geteilt hat, anstatt aus dem Container zu überfließen:

So können wir einen Zeilenpausen in einem Wort erzwingen, das viele Charaktere hat.

Abschluss

Um einen Linienbruch in einem langen Wort in einem Div so zu erzwingen, so dass es die Teile der Wörter nach der Größe des Containers in die nächsten Zeilen bewegt. Im CSS-Stilelement ist nur erforderlich.