CSS er et kaskaderende stilark som gir forskjellige egenskaper til HTML -elementer for stylingformål. Det er hundrevis av egenskaper, som tekst-align, grense, margin, polstring, bredde, høyde og mer. Mens det skriver et stort avsnitt i HTML, kan det være uønsket mellomrom mellom teksten, eller noen ganger kreves det å vise tekst på en bestemt måte. I et slikt scenario, bruk CSS “hvitrom”Eiendom for å kontrollere hvite rom i teksten.

I denne håndboken vil CSS White-Space-egenskapen bli diskutert med eksempler. Så la oss starte!

Hva er CSS White-Space-eiendom?

CSS “hvitrom”Eiendom håndterer de hvite rommene inne i elementet.

Syntaks

Syntaksen til den hvite rom-egenskapen er nevnt nedenfor. Du kan tilordne en verdi i henhold til dine preferanser:

White-Space: Nowrap | Pre-Wrap | Normal | Initial | Arve | Pre | Pre-Line;

Så før vi skynder oss inn i diskusjonen, la oss lære om de tilknyttede verdiene med denne egenskapen en etter en!

White-Space: Nowrap

Den hvite rom-egenskapen med verdien “Nowrap”Kollapser de hvite områdene i en linje. Det eliminerer linjen bryter i kilden og pakker aldri tekst. Dessuten fortsetter teksten til forekomsten av
stikkord.

Eksempel

La oss flytte til det praktiske eksemplet, der vi skal skrive noen avsnitt. Disse blir deretter brukt med hvitrommets egenskap med dens forskjellige verdier og ser resultatene deres.

Html

Innenfor kroppselementet i HTML -filen:

• Legg til en div med klassenavnet “container”.
• Legg så til

  tag og

  Tag med en klasse som heter “overskrift”.

• Etter det, a

  Tag er plassert for å legge til et avsnitt på websiden.

Merk: For å sjekke ut verdien av forskjellige romverdier med hvit rom, har vi plassert hvite rom i avsnittet:

Den hvite rom-egenskapen

White-Space: Nowrap:

Vi er et team. Vi jobber sammen for et felles oppdrag. Vi er et team.
Vi jobber sammen for et felles oppdrag. Vi er et team.

Inne i hodemerket til HTML, legg til taggen.

CSS

kropp
Bakgrunnsfarge: #A9B6EB;

“bakgrunnsfarge”Eiendom brukes til å stille inn kroppselementets bakgrunnsfarge.

Stil “container” div

.container
Høyde: 200px;
Farge: RGB (19, 1, 56);

Her er beskrivelsen av den gitte koden:

• “.container”Indikerer divklassebeholderen der“.”Tegn blir referert til som klassevelgeren.
• “høyde”Eiendom setter elementets høyde til 200px.
• “farge”Eiendom spesifiserer skriftens farge.

Stil "overskrift" -klasse

.overskrift
tekst-align: sentrum;

Deretter legger du noen stilegenskaper til overskriftene H1 og H2 som er forklart nedenfor:

• “.overskrift”Brukes til å få tilgang til klassen til

  og

  elementer.

• “Tekstalign”Eiendom med verdien som“senter”Vil sentrere teksten.

Stil “A” -klasse

.A
White-Space: Nowrap;

• “.en”Henviser til klassen i avsnittet.
• “hvitrom”Eiendom med verdien som“Nowrap”Vil kollapse alle hvite rom.

Som vi kan se i skjermbildet under gitt utgang. Nowrap -verdien har kollapset alle de hvite områdene fra avsnittet, og teksten er ikke pakket inn i det hele tatt:

White-Space: Normal

Det er standardverdien til egenskapen White-Space. Det kollapser de hvite rommene til et enkelt tegn og pakker teksten til neste linje når det er nødvendig.

Syntaks

I CSS, tilordne verdien “normal”Til hvitrommet eiendom:

hvitrom: normal;

Det kan observeres at de hvite rommene er kollapset, og teksten er pakket inn. Linjer er brudd på å fylle ut plassen nedenfor:

White-Space: Pre

Romsekvensen er bevart, og linjene er ødelagt når Newline -tegnet er oppfylt eller på
. Mer spesifikt, “før”Verdi bevarer både linjeskift og mellomrom.

Syntaks

For å bruke den, tilordne pre-eiendomsverdi til den hvite rom-egenskapen som nevnt nedenfor:

White-Space: Pre;

Produksjon

White-Space: Pre-Line

Mens du bruker “forhåndslinje”De hvite rommene er kollapset, og linjene er ødelagt på Newline -tegn, på
stikkord. Dessuten pakker den også inn teksten,

Syntaks

I CSS vil den hvite rom-egenskapen bli tildelt verdi som nevnt nedenfor:

White-Space: Pre-Line;

Ved å stille inn forhåndsverdien til den hvite rom-egenskapen, vil resultatet se slik ut:

White-Space: Arve

Verdien "arve”Indikerer at denne egenskapen skal arve verdien fra overordnet element.

Syntaks

Her er syntaks for å spesifisere verdien av hvitområdet som arver:

hvitrom: arve;

Ovennevnte kode vil resultere som vist i bildet nedenfor:

White-Space: Pre-Wrap

“pre-wrap”Verdi bevarer mellomrom, faner og newline. Det pakker også teksten.

Syntaks

White-Space: pre-wrap;

Produksjon

White-Space: Initial

“første”Indikerer at CSS -egenskapen skal settes til standardverdien. Denne verdien kan tilordnes den hvite rom-egenskapen som følger:

White-Space: Initial;

Produksjon

Bonus tips

I CSS er det noen andre eiendomsverdier med hvit rom som du kan utforske:

• White-Space: Gå tilbake
• White-Space: Omvendte lag
• White-Space: White-Plass
• White-Space: Unset

Vi har lært de forskjellige eiendomsverdiene for hvitt rom og deres bruk.

Konklusjon

I CSS, “hvitrom”Eiendom definerer hvordan du håndterer de hvite rommene i et element. Noen ganger er for eksempel en dokumentkildekode skrevet på en måte som ikke er for endelig gjengivelse. Det trenger noen innrykk og rom. For å sette dem deretter, tillater CSS oss å bruke egenskapen White-Space med forskjellige verdier. I denne artikkelen har vi forklart verdiene til hvitromsegenskap og deres oppførsel med eksempler.