CSS ist ein Kaskadenstilblatt, das HTML -Elemente für Styling -Zwecke unterschiedliche Eigenschaften bietet. Es gibt Hunderte von Eigenschaften, wie Text-Align, Rand, Rand, Polsterung, Breite, Höhe und mehr. Während des Schreibens eines großen Absatzes in HTML kann zwischen dem Text unerwünschte Platz bestehen, oder manchmal ist es erforderlich, Text auf eine bestimmte Weise anzuzeigen. In einem solchen Szenario die CSS verwenden “weißer RaumEigenschaft zur Kontrolle weißer Räume im Text.

In diesem Handbuch wird die CSS-White-Space-Eigenschaft mit Beispielen erörtert. So lass uns anfangen!

Was ist CSS White-Space-Eigenschaft?

Das CSS “weißer RaumDie Eigenschaft verarbeitet die weißen Räume im Element.

Syntax

Die Syntax der weißen Raumeigenschaft wird unten erwähnt. Sie können einen Wert gemäß Ihren Einstellungen zuweisen:

weißer Raum: Nowrap | Pre-Wrap | Normal | Initial | Erben | vor der Linie;

Bevor wir uns in die Diskussion beeilen, lernen wir die damit verbundenen Werte mit dieser Eigenschaft nacheinander kennen!

Weißer Raum: Nowrap

Die Weißraum Eigenschaft mit dem Wert “Nowrap”Bricht die weißen Räume in eine Linie zusammen. Es eliminiert die Linienbrüche in der Quelle und wickelt niemals Text ein. Darüber hinaus setzt sich der Text bis zum Auftreten der
Schild.

Beispiel

Wechseln wir zum praktischen Beispiel, in dem wir einige Absätze schreiben werden. Diese werden dann mit den weißen Raumeigenschaften mit ihren unterschiedlichen Werten angewendet und sehen ihre Ergebnisse an.

Html

Innerhalb des Körperselements der HTML -Datei:

• Fügen Sie ein Div mit dem Klassennamen hinzu “Container”.
• Dann füge hinzu

  Tag und

  Tag mit einer Klasse namens “Überschrift”.

• Danach a

  Das Tag wird platziert, um einen Absatz auf der Webseite hinzuzufügen.

Notiz: Um die Funktionsweise verschiedener weißer Eigenschaftswerte zu überprüfen, haben wir weiße Räume innerhalb des Absatzes platziert:

Das weiße Raum

Weißer Raum: Nowrap:

Wir sind ein Team. Wir arbeiten zusammen für eine gemeinsame Mission. Wir sind ein Team.
Wir arbeiten zusammen für eine gemeinsame Mission. Wir sind ein Team.

Fügen Sie im Kopf -Tag von HTML Tag hinzu.

CSS

Körper
Hintergrundfarbe: #A9B6EB;

Der "HintergrundfarbeEigenschaft wird verwendet, um die Hintergrundfarbe des Körperelements festzulegen.

Stil „Container“ div

.Container
Höhe: 200px;
Farbe: RGB (19, 1, 56);

Hier ist die Beschreibung des angegebenen Code:

• “.Container”Zeigt den Div -Klassenbehälter an, in dem die“.Das Zeichen wird als Klassenauswahl bezeichnet.
• “HöheDie Eigenschaft setzt die Höhe des Elements auf 200px.
• “FarbeEigenschaft gibt die Farbe der Schrift an.

Stil „Überschrift“ -Klasse

.Überschrift
Text-Align: Mitte;

Fügen Sie als nächstes einige Stileigenschaften den Überschriften H1 und H2 hinzu, die unten erklärt werden:

• “.Überschrift”Wird verwendet, um auf die Klasse von zuzugreifen

  Und

  Elemente.

• “Textausrichtung”Eigenschaft mit dem Wert als"Center”Wird den Text zentrieren.

Stil „A“ Klasse

.A
weißer Raum: Nowrap;

• “.A”Bezieht sich auf die Klasse des Absatzes.
• “weißer Raum”Eigenschaft mit dem Wert als"Nowrap”Wird alle weißen Räume zusammenbrechen.

Wie wir im untergegebenen Ausgangsbildschirm sehen können. Der Nowrap -Wert hat alle weißen Räume aus dem Absatz zusammengebrochen, und der Text ist überhaupt nicht verpackt:

Weißer Raum: Normal

Es ist der Standardwert der weißen Raumeigenschaft. Es bricht die weißen Räume in ein einzelnes Zeichen zusammen und umhüllt den Text bei Bedarf in die nächste Zeile.

Syntax

In CSS den Wert zuweisen “normal”In die Eigenschaft aus weißem Raum:

weißer Raum: normal;

Es kann beobachtet werden, dass die weißen Räume zusammengebrochen sind und der Text verpackt ist. Die Linien sind Bruch, um den folgenden Raum zu füllen:

weißer Raum: vor

Die Raumsequenz bleibt erhalten und die Linien werden unterbrochen, wenn der neue Zeilenzeichen erfüllt ist oder an
. Genauer gesagt das “VorDer Wert bewahrt sowohl Linienbrüche als auch Räume.

Syntax

Um es zu nutzen, weisen Sie der unten erwähnten Eigenschaft der weißen Raum den Wert vor dem Eigenschaft zu::

weißer Raum: PRE;

Ausgang

Weißer Raum: Vorline

Während der Verwendung der “Vorlinie”Die weißen Räume werden zusammengebrochen und die Linien sind bei Newline -Charakteren unterbrochen
Schild. Darüber hinaus wickelt es auch den Text um,

Syntax

In CSS wird der unten erwähnten weißen Raumeigenschaft den Wert zugewiesen:

weißer Raum: Vorline;

Indem das Ergebnis den Wert vor der Leitung auf die Eigenschaft aus weißem Raum festgelegt wird, sieht das Ergebnis so aus:

weißer Raum: Erbe

Der Wert "erben”Zeigt an, dass diese Eigenschaft den Wert von ihrem übergeordneten Element erben sollte.

Syntax

Hier ist die Syntax zum Angeben des Werts der weißen Raumeigenschaft als Erbe:

weißer Raum: Erbe;

Der obige Code entsteht wie im folgenden Bild gezeigt:

weißer Raum: Voraberbieter

Der "vor der HandelungDer Wert bewahrt die Räume, Registerkarten und Newline. Es wickelt auch den Text um.

Syntax

weißer Raum: Vor-Wrap;

Ausgang

Weißer Raum: Initial

“Initial”Zeigt an, dass die CSS -Eigenschaft auf ihren Standardwert festgelegt werden soll. Dieser Wert kann wie folgt der Eigenschaft des weißen Raums zugeordnet werden:

weißer Raum: Initial;

Ausgang

Bonuspipp

In CSS gibt es einige andere Werte für weiße Raum, die Sie weiter untersuchen können:

• weißer Raum: Rückkehr
• weißer Raum: Rückkehr-Schicht
• Weißer Raum: weiße Raum
• Weißer Raum: Uneinig

Wir haben die verschiedenen Werte für weiße Raum und ihre Verwendung gelernt.

Abschluss

In CSS, die “weißer RaumEigenschaft definiert, wie man mit den weißen Räumen innerhalb eines Elements umgeht. Zum Beispiel wird manchmal ein Dokumentquellcode auf eine Weise geschrieben, die nicht zum endgültigen Rendering bestimmt ist. Es braucht einige Eindrücke und Räume. Um sie entsprechend festzulegen, ermöglicht CSS es uns, die Eigenschaft Weißraum mit unterschiedlichen Werten zu verwenden. In diesem Artikel haben wir die Werte der weißen Raumeigenschaft und ihr Verhalten mit Beispielen erläutert.