CSS Word Wrap
In diesem Tutorial geben wir vollständige Anleitung zu dieser Eigenschaft „Word-Wrap“ und werden Beispiele durchführen, in denen wir die CSS-Eigenschaft „Word-Wrap“ verwenden werden.
Beispiel 1:
Wir werden unseren Code beginnen und ihn im Visual Studio -Code ausführen. Wir beginnen zunächst eine neue Datei und wählen dann HTML als Sprache aus. Nun, tippen Sie “!”Und drücken Sie“ ENTER.Hier finden Sie alle HTML -Basis -Tags. Infolgedessen müssen wir alle diese Tags nicht manuell hinzufügen. Nach all dem fügen wir einfach den Namen der CSS -Datei in das Tag "Link" in den "Kopf" ein. Wir setzen zwei Überschriften in den Körper und erstellen ein DIV, in dem wir ein langes Wort schreiben, damit wir die Eigenschaft „Word-Wrap“ in CSS verwenden und Ihnen zeigen, wie es funktioniert.
Wir dekorieren die Überschrift, indem wir „Farbe“ anwenden und mithilfe der Eigenschaft "Textdekoration" auf das „Rot“ einstellen und das Schlüsselwort „Unterstreich“ für diese Eigenschaft verwenden. Wir tragen das Styling auf diese Überschrift auf, um sie attraktiv zu machen. Wir dekorieren auch die zweite Überschrift: „Grün“ als „Farbe“ und wenden die „Textdekoration“ an und setzen sie auf "Unterstreich". Wir setzen die „Breite“ des „DIV“ als „150px“ und erstellen eine „Grenze“ um sie herum. Dieser Rand ist ungefähr 3px in seiner „Breite“ und er ist ein „fester“ Typ, „rot“ in der „Farbe“.
Hier wenden wir die Eigenschaft „Word-Wrap“ an und setzen sie auf „Normal“ ein, was auch der Standardwert ist. Es wird das lange Wort nicht brechen. Das lange Wort wird angezeigt, wie es im HTML -Code geschrieben ist. Es wird die Grenze überqueren, die wir für die DIV geschaffen haben, und der lange Text bleibt gleich. Es wird dieses Wort nicht brechen.
Die Ausgabe zeigt, dass das lange Wort genauso erscheint, wie wir es in die HTML -Datei schreiben. Es überschreitet die Grenze und erscheint in einer Linie. Das lange Wort ist hier nicht unterbrochen, da es die Eigenschaft "Word-Wrap" auf "normal" festlegt, die dem "Standard" mit „Standard“ entspricht.
Beispiel # 2:
Wir verwenden den gleichen HTML-Code und jetzt werden wir das Schlüsselwort "Break-Wort" als Wert der Eigenschaft "Word-Wrap" in diesem Beispiel anwenden.
Die „Farbe“ für die Überschrift 1 „H1“, wir verwenden „Maroon“ und verwenden die „Textdekoration“, um diese Überschrift zu unterstreichen. Für "H2" verwenden wir "lila" als "H2" "Farbe" und "Untersteuerung" auch als Überschrift "H2". Die „Breite“ des „Div“ -Containers lautet "160px" und entwerfen Sie eine Grenze um ihn. Wir setzen "3px" für die "Breite" des Divs "Breite", die in der Farbe "fest" und "Maroon" ist. Hier ist die Eigenschaft "Word-Wrap", in der wir den Wert "Breakwort" verwenden. Dieser Wert wird das lange Wort gemäß dem angegebenen Raum brechen. Wir werden uns die Ausgabe ansehen und wissen, wie das lange Wort bricht, indem wir diese Eigenschaft nutzen.
Beachten Sie, wie das lange Wort unterbrochen und im DIV -Behälter angepasst wird. Dieses lange Wort wird in dieser Ausgabe unterbrochen, da wir den Wert "Break-Wort" für die Eigenschaft "Word-Wrap" verwenden.
Beispiel # 3:
Wir haben zwei Überschriften "H1" und "H2". Unter diesen Überschriften haben wir zwei verschiedene Divs mit dem Namen "A" und "B". Wir schreiben den Text in beide Divs und geben in jedes Div ein langes Wort. Jetzt erstellen wir eine CSS-Datei, in der wir die Eigenschaft „Word-Wrap“ verwenden werden.
Wir verwenden die Eigenschaft "Farbe" und definieren sie als "grün", um die Überschrift sowie die Eigenschaft "Textdekoration" und das Schlüsselwort "Unterstreich" für diese Eigenschaft "Textdekoration" zu dekorieren. Wir verwenden auch "orange" als "Farbe" für die nächste Überschrift und implementieren "Textdekoration" mit "Unterstreich" als Einstellung. Wir setzen die „Breite“ des „DIV“ als „180px“, die diese Breite für beide Divs festlegen wird, weil wir den Namen eines Div hier nicht erwähnen. Wir verwenden auch das „Grenz“ -Sachgut, das auch für beide Divs gilt. Die „Breite“ der Grenze für beide Divs lautet "3px", "fester" Typ und "Blau" für die "Farbe" des Randes.
Wir erwähnen den Namen des ersten Div. a ”und dann wird das Attribut„ Word-Wrap “angewendet. Der Wert ist auf "normal" festgelegt, was auch der Standardwert "Standard" ist. Das lange Wort ist für diese Div nicht gebrochen. Das lange Wort wird genau so angezeigt, wie es in HTML -Code eingegeben wird. Jetzt haben wir die zweite Div. B". Dafür verwenden wir die Eigenschaft "Word-Wrap" und der Wert "Breakwort" wird verwendet. Das lange Wort wird gemäß dem bereitgestellten Raum mit diesem Wert unterbrochen. Durch die Nutzung dieser Eigenschaft und des Wertes können wir sehen, wie sich das lange Wort in der Ausgabe spaltet.
Das lange Wort der ersten DIV ist nicht kaputt, weil wir „normal“ als Wert von „Wortschreiber“ für die „DIV“ verwenden. A". Im zweiten Div können Sie jedoch sehen, dass das lange Wort auch im angegebenen Raum angepasst wird. Dieses lange Wort, das im zweiten Div vorhanden ist, ist gebrochen. Dies liegt an der Verwendung des "Break-Wort" -Wertwerts der Eigenschaft "Word-Wrap".
Beispiel Nr. 4:
Wir erstellen Überschriften für dieses Beispiel und setzen zwei Absätze mit den verschiedenen Klassennamen als „Par“ für den ersten Absatz und „Par1“ für den zweiten Absatz ein. Wir haben auch ein langes Wort in beide Absätze eingerichtet und werden die Eigenschaft „Word-Wrap“ in CSS verwenden.
Die „Farbe“ der Überschriften ist in RGB -Form festgelegt. Sein Wert ist „RGB (112, 6, 6)“, ein „kastanienbrauner“ Farbton. Wir verwenden auch die "algerische" Schriftfamilie für "H1". Wir haben auch die "Schriftfamilie" von "H2" als "Times New Roman" festgelegt. Die „Farbe“ von H2 ist „blau-violett“ und style es als „kursiv“, um es attraktiv zu machen.
Jetzt kommt „Par“, das den ersten Absatz definiert. Die „Breite“, die wir hier definieren, lautet "200px" und wir setzen seine "Hintergrundfarbe" als "hellblau". Wir möchten auch den Rand dafür erstellen, also verwenden wir "Rand" und setzen sie auf "2PX Solid Black" ein. Die "Polsterung", die wir beschreiben, lautet "10px" und die Größe des Textes des Absatzes ist "20px" für "Par". Für diesen Absatz verwenden wir die Eigenschaft "Word-Wrap" nicht.
Danach haben wir einen weiteren Absatz mit dem Namen "P1". Wir haben die "Breite" als "11EM" und die "Hintergrundfarbe" als "hellblau" definiert. Dafür benötigen wir auch einen Rand."Die" Polsterung ", über die wir sprechen, ist" 10px ". Wir verwenden die Eigenschaft "Word-Wrap" und setzen sie auf "Wortausbruch", das wir in unseren vorherigen Codes besprochen haben, und die Größe des Absatztextes ist "20px" für "Par1".
Hier ist das lange Wort des ersten Absatzes nicht unterbrochen. Aber wir verwenden die „Wort-Wrap: Break-Wort“ für den zweiten Absatz, daher ist das lange Wort des Absatzes gebrochen.
Abschluss:
Der Zweck dieses Tutorials besteht darin, Ihnen beizubringen, wie Sie die CSS-Word-Wrap-Eigenschaft verwenden können. In diesem Tutorial haben wir uns die Eigenschaft "Word-Wrap" von CSS angesehen und beschrieben, was es ist, wie es verwendet wird und wie es funktioniert. Wir haben erklärt, dass diese Eigenschaft das lange Wort bricht und dieses lange Wort im angegebenen Raum anpasst. Wir haben auch Beispiele für die Verwendung dieser Eigenschaft „Word-Wrap“ sowie die Ergebnisse aller Beispiele gezeigt.