CSS è un foglio di stile a cascata che fornisce proprietà diverse agli elementi HTML per scopi di styling. Ci sono centinaia di proprietà, come allineamento del testo, bordo, margine, imbottitura, larghezza, altezza e altro ancora. Durante la scrittura di un grande paragrafo in HTML, può esserci spazio indesiderato tra il testo o talvolta è necessario visualizzare il testo in modo specifico. In tale scenario, utilizzare il CSS "spazio bianco"Proprietà per il controllo degli spazi bianchi all'interno del testo.

In questo manuale, la proprietà CSS White-Space sarà discussa con esempi. Quindi iniziamo!

Cos'è la proprietà CSS White-Space?

Il CSS "spazio bianco"La proprietà gestisce gli spazi bianchi all'interno dell'elemento.

Sintassi

La sintassi della proprietà dello spazio bianco è menzionata di seguito. Puoi assegnare un valore in base alle tue preferenze:

Spazio bianco: NowRap | pre-wrap | normale | iniziale | eredità | pre | pre-line;

Quindi, prima di correre nella discussione, apprendiamo i valori associati con questa proprietà uno per uno!

Spazio bianco: nowrap

La proprietà dello spazio bianco con il valore "nowrap"Crolla gli spazi bianchi in una linea. Elimina le interruzioni della linea nella fonte e non avvolge mai il testo. Inoltre, il testo continua fino al verificarsi del
etichetta.

Esempio

Passiamo all'esempio pratico, in cui scriveremo alcuni paragrafi. Questi vengono quindi applicati con la proprietà dello spazio bianco con i suoi diversi valori e vedere i loro risultati.

Html

All'interno dell'elemento corporeo del file HTML:

• Aggiungi un div con il nome di classe "contenitore".
• Poi aggiungi

  tagg e

  tag con una classe chiamata "intestazione".

• Dopodiché a

  Il tag è posizionato per aggiungere un paragrafo nella pagina web.

Nota: Per controllare il funzionamento di diversi valori di proprietà dello spazio bianco, abbiamo inserito spazi bianchi all'interno del paragrafo:

La proprietà dello spazio bianco

Spazio bianco: NowRap:

Siamo una squadra. Lavoriamo insieme per una missione comune. Siamo una squadra.
Lavoriamo insieme per una missione comune. Siamo una squadra.

All'interno del tag testa di HTML, Aggiungi tag.

CSS

corpo
Background-color: #a9b6eb;

IL "colore di sfondo"La proprietà viene utilizzata per impostare il colore di sfondo dell'elemento corporeo.

Stile "Container" Div

.Container
Altezza: 200px;
Colore: RGB (19, 1, 56);

Ecco la descrizione del codice dato:

• ".contenitore"Indica il contenitore di classe Div in cui il"."Il segno è indicato come selettore di classe.
• "altezza"La proprietà imposta l'altezza dell'elemento su 200px.
• "colore"La proprietà specifica il colore del carattere.

Classe di "intestazione" di stile

.intestazione
Testo-align: centro;

Successivamente, aggiungi alcune proprietà di stile alle intestazioni H1 e H2 che sono spiegate di seguito:

• ".intestazione"È utilizzato per accedere alla classe di

  E

  elementi.

• "allineamento"Proprietà con il valore impostato come"centro"Cenderà il testo.

Classe "A" di stile

.UN
Spazio bianco: nowrap;

• ".UN"Si riferisce alla classe del paragrafo.
• "spazio bianco"Proprietà con il valore impostato come"nowrap"Crollerà tutti gli spazi bianchi.

Come possiamo vedere nella schermata di output di seguito. Il valore NowRap ha crollato tutti gli spazi bianchi dal paragrafo e il testo non è affatto avvolto:

Spazio bianco: normale

È il valore predefinito della proprietà dello spazio bianco. Crolla gli spazi bianchi in un singolo carattere e avvolge il testo alla riga successiva quando necessario.

Sintassi

In CSS, assegnare il valore "normale"Alla proprietà dello spazio bianco:

Spazio bianco: normale;

Si può osservare che gli spazi bianchi sono crollati e il testo è avvolto. Le linee sono rotte per riempire lo spazio seguente:

Spazio bianco: pre

La sequenza dello spazio viene preservata e le linee sono spezzate quando il carattere di nuova linea è accolto o acceso
. Più specificamente, il "pre"Valore preserva sia le pause e gli spazi della linea.

Sintassi

Per utilizzarlo, assegnare il valore pre-proprietà alla proprietà dello spazio bianco come indicato di seguito:

spazio bianco: pre;

Produzione

Spazio bianco: pre-line

Mentre usi il "pre-line"Gli spazi bianchi sono crollati e le linee sono rotte ai personaggi di Newline, a
etichetta. Inoltre, avvolge anche il testo,

Sintassi

In CSS, alla proprietà dello spazio bianco verrà assegnato il valore come menzionato di seguito:

Spazio bianco: pre-line;

Impostando il valore pre-line sulla proprietà dello spazio bianco, il risultato sarà così:

Spazio bianco: eredità

Il valore "ereditare"Indica che questa proprietà dovrebbe ereditare il valore dal suo elemento genitore.

Sintassi

Ecco la sintassi per specificare il valore della proprietà dello spazio bianco come ereditario:

Spazio bianco: eredità;

Il codice sopra risulterà come mostrato nell'immagine seguente:

Spazio bianco: pre-wrap

IL "pre-wrap"Valore preserva gli spazi, le schede e la nuova linea. Avvolge anche il testo.

Sintassi

Spazio bianco: pre-wrap;

Produzione

Spazio bianco: iniziale

"iniziale"Indica che la proprietà CSS deve essere impostata sul suo valore predefinito. Questo valore può essere assegnato alla proprietà dello spazio bianco come segue:

Spazio bianco: iniziale;

Produzione

Suggerimento bonus

In CSS, ci sono altri valori di proprietà dello spazio bianco che puoi esplorare ulteriormente:

• Spazio bianco: Ripristina
• Spazio bianco: lo strato di ripristino
• Spazio bianco: spazi bianchi
• Spazio bianco: Unset

Abbiamo imparato i vari valori di proprietà dello spazio bianco e il loro utilizzo.

Conclusione

In CSS, il “spazio bianco"La proprietà definisce come gestire gli spazi bianchi all'interno di un elemento. Ad esempio, a volte un codice sorgente del documento è scritto in un modo che non è per il rendering finale. Ha bisogno di un po 'di rientranza e spazi. Per impostarli di conseguenza, CSS ci consente di utilizzare la proprietà dello spazio bianco con valori diversi. In questo articolo, abbiamo spiegato i valori della proprietà dello spazio bianco e il loro comportamento con esempi.