Come impostare la spaziatura e il posizionamento del testo in CSS

Mentre si scrive un documento, si deve organizzare correttamente il testo. Ciò aiuterà gli utenti a comprendere il flusso di contenuti e aiuta a leggere il documento. Per fare ciò, ci devono essere adeguate regolazioni del testo, come rientro, spazi di parole, allineamento, direzione e altro ancora. Più specificamente, CSS ci consente di utilizzare diverse proprietà per regolare la spaziatura e il posizionamento del testo.

Il risultato di questo articolo sarà:

• Cos'è la spaziatura del testo?
• Come utilizzare le proprietà di spaziatura del testo CSS
• Quali sono le proprietà di posizionamento del testo CSS?
• Come utilizzare le proprietà di posizionamento del testo CSS?

Cos'è la spaziatura del testo?

La spaziatura del testo si riferisce alla quantità di spazio tra il testo particolare. Diverse proprietà CSS sono utilizzate per l'aggiunta di spazi al testo.

Come utilizzare le proprietà di spaziatura del testo CSS?

Per fornire spazi all'interno del testo, CSS ci consente di utilizzare proprietà diverse, che sono elencate di seguito:

• spazio bianco
• indentatura del testo
• spaziatura delle parole
• altezza della linea
• spaziatura del carattere

Esempio 1: come rientrare al testo di Element?

CSS "indentatura del testo"La proprietà viene utilizzata per aggiungere rientro alla prima riga di un testo. Per utilizzarlo, aggiungi l'elemento Div con la classe "rientro". All'interno di questo div, aggiungi

tagga per l'intestazione e

Tag per l'aggiunta di un paragrafo.

Html

Proprietà del testo-indice CSS

La spaziatura del testo fornisce un aspetto molto ordinato al contenuto scritto.
Il testo dovrebbe essere rotto in blocchi gestibili.

Stile "rientro" Div

.rientro
larghezza: 350px;
Altezza: 200px;
Endente di testo: 40px;
Margine: auto;
imbottitura: 5px;
Background-color: #FFC107;
bordo: 10px solido #9e9e9e;

Di seguito è spiegato l'elenco delle proprietà CSS applicate al divente Div:

• "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento.
• "altezza"La proprietà viene utilizzata per impostare l'altezza dell'elemento.
• "indentatura del testoLa proprietà "è impostata con il valore di"40px", Che rappresenta lo spazio 40px all'inizio della prima riga di un paragrafo.
• "margine"Proprietà con il valore impostato come"auto"Genera uno spazio uguale attorno all'elemento.
• "imbottitura"Proprietà con il valore"5px"Aggiungi lo spazio di 5px attorno al contenuto dell'elemento.
• "colore di sfondo"La proprietà specifica il colore di sfondo dell'elemento.
• "confine"Proprietà con il valore impostato come"10px solido #9e9e9e"Significa la larghezza del bordo, lo stile del bordo e il colore del bordo.

Stile "H2" di "rientro"

.rientro H2
Decisore del testo: 3px sottolinea grigio;

IL

Viene applicato l'elemento intestato del diventedecorazione del testo"Proprietà con il valore"3px sottolinea grigio" dove il "3px"Rappresenta la larghezza della linea,"sottolineare"Rappresenta la riga sotto il testo e"grigio"È il colore.

Produzione

Esempio 2: come aggiungere spazi bianchi all'interno dell'elemento?

IL "Spazio bianco CSS"La proprietà specifica gli spazi bianchi all'interno dell'elemento particolare. Questa proprietà si basa sui seguenti valori:

• normale
• nowrap
• pre-wrap
• pre
• pre-line
• Breakspace

Html

In CSS, specificare la proprietà dello spazio bianco con il valore "pre-line":

Spazio bianco: pre-line;

Produzione

Esempio 3: come aggiungere spazi tra le parole?

Il CSS "spaziatura delle parole"La proprietà viene utilizzata per specificare gli spazi tra il testo dell'elemento. Questa proprietà è associata ai seguenti valori:

• lunghezza
• normale
• iniziale
• ereditare

Guarda l'esempio!

Quindi, in questo esempio, aggiungeremo il "spaziatura delle parole"Proprietà con il valore"30px":

Spazio di parole: 30px;

Produzione

Esempio 4: come aggiungere spazi tra le righe?

IL "altezza della linea"La proprietà viene utilizzata per specificare lo spazio verticale tra le righe di testo.

Qui in questo esempio, la proprietà della linea di linea viene utilizzata con il valore "3em":

linea di linea: 3em;

Produzione

Esempio 5: come aggiungere spazi tra i caratteri del testo?

Il CSS "spaziatura del carattere"La proprietà viene utilizzata per l'aggiunta degli spazi tra i caratteri del testo.

Qui, l'elemento viene fornito con la proprietà che spazia le lettere con il valore di "-1px"In CSS:

spaziatura di lettere: -1px;

Produzione

Quali sono le proprietà di posizionamento del testo?

Il posizionamento del testo si riferisce all'allineamento del testo. Significa la posizione di testo come sinistra, destra e molti altri, in relazione al punto di inserimento del testo.

Come utilizzare le proprietà di posizionamento del testo CSS?

Di seguito sono riportate le proprietà che possono essere utilizzate per regolare il posizionamento del testo.

• text-align-last
• allineamento
• allineamento verticale
• direzione
• Unicode-Bidi

Esempio 1: come allineare l'ultima riga del testo di Element?

Il CSS "text-align-last"La proprietà viene utilizzata per regolare l'allineamento dell'ultima riga del testo. Nel nostro caso, abbiamo impostato la proprietà del testo-align-ultimo come "giusto":

Testo-align: giusto;

Produzione

Esempio 2: come allineare il testo in orizzontale in HTML?

Il CSS "allineamento"La proprietà viene utilizzata per allineare il testo in orizzontale. Ad esempio, abbiamo impostato il suo valore come "Giusto":

Testo-align: giusto;

Produzione

Esempio 3: come allineare il testo in verticale in HTML?

IL "allineamento verticale"La proprietà del CSS viene utilizzata per allineare il testo in verticale.

Per utilizzare questa proprietà, aggiungi un "

"Elemento per l'aggiunta di un paragrafo al documento desiderato. Questo paragrafo è costituito dagli elementi in determinati punti con ID come "apice":

Allineamento del testo fornisce il lettori con un visivamente
testo logico.

In CSS, l'elemento con ID "apice"È disegnato con le seguenti proprietà:

#superscript
Background-color: RGB (3, 162, 11);
allineamento verticale: super;

Qui:

• "colore di sfondo"La proprietà viene utilizzata per impostare il colore di sfondo dell'elemento.
• "allineamento verticale" costo dell'immobile "super"Allinea il testo leggermente verticalmente sopra.

Produzione

Esempio 4: come cambiare la direzione del testo?

Il CSS "direzione"La proprietà viene utilizzata per modificare la direzione del testo dell'elemento.

In CSS, la proprietà di direzione con il valore "rtl"È specificato per fare la direzione dell'elemento da destra a sinistra:

Direzione: RTL;

Produzione

Esempio 5: come gestire il testo bidirezionale in HTML?

Per gestire il testo bidirezionale in un documento, il CSS "Unicode-Bidi"La proprietà viene utilizzata. Il testo bidirezionale si riferisce al documento con testo in entrambe le direzioni, da destra a sinistra e da sinistra a destra. Il testo bidirezionale di solito esiste nel documento con più lingue, che possono essere impostate utilizzando il “direzione" proprietà.

Per la dimostrazione, aggiungere il seguente codice nel file CSS:

Direzione: RTL;
Unicode-Bidi: bidi-override;

Qui:

• "direzioneLa proprietà "è impostata con il valore"rtl"Che indica la direzione da destra a sinistra del testo.
• "Unicode-Bidi"Proprietà con il valore impostato come"bidi-override"Viene utilizzato per specificare se il testo fornito deve essere sovrascritto per supportare più lingue in un documento.

Produzione

Si trattava di regolare la spaziatura e il posizionamento del testo in CSS.

Conclusione

Durante la scrittura di un documento, è molto necessario tenere a mente il formato e lo stile del documento. Un documento ben formattato non produce problemi di leggibilità. Per fare ciò, CSS ci fornisce proprietà diverse che aiutano nella spaziatura e nel posizionamento del testo in HTML. Alcune delle proprietà sono "allineamento","direzione","text-align-last"E altro ancora. Questo post ha dimostrato varie proprietà CSS che aiutano nelle impostazioni di allineamento e posizionamento del testo dei documenti HTML.