Effetti di testo in CSS

Un sito Web è costituito da vari tipi di contenuti come immagini, testo, animazioni e molti altri. Oltre a abbellire il contenuto del sito Web, puoi anche controllarne il comportamento. Questo può essere fatto aggiungendo determinati effetti usando varie proprietà CSS.

In questa guida, parleremo di come puoi aggiungere effetti al testo che appare sul tuo sito Web.

Iniziamo.

Effetti di testo in CSS

È possibile aggiungere effetti sul testo che appare sulle pagine Web utilizzando le varie proprietà fornite da CSS. Le proprietà CSS relative al testo sono le seguenti.

1. Proprietà di testo su overflow
2. Proprietà in modalità scrittura
3. Proprietà Word-Wrap
4. Proprietà delle parole

Di seguito abbiamo discusso ciascuno di questi in grande profondità.

Proprietà di testo su overflow

La proprietà di testo su flusso descrive ciò che accade al testo traboccante che è invisibile al lettore. Non è una proprietà autonoma e deve essere utilizzato con lo spazio bianco: nowrap e overflow: Hidden Properties.

Sintassi

Testo-overflow: clip | ellipsi;

Il valore della clip è un valore predefinito che ritaglia il testo traboccato, mentre il valore di ellipsis taglia anche il testo e mostra un'ellissi o tre punti al posto del testo traboccato.

Esempio
Questo esempio dimostra il funzionamento della proprietà.

Html

Testo-overflow: clip

Questo esempio dimostra il valore della clip della proprietà text-overflow.

Testo-overflow: ellipsis

Questo esempio dimostra il valore Ellipsis della proprietà Testo-Overflow.

Nel codice sopra, abbiamo semplicemente creato due

elementi e posizionarli un lungo testo per dimostrare il funzionamento di entrambi i valori della proprietà.

CSS

.p1
Spazio bianco: nowrap;
Overflow: nascosto;
Testo-overflow: clip;
larghezza: 190px;
bordo: 1px nero solido;

.p2
Spazio bianco: nowrap;
Overflow: nascosto;
text-overflow: ellipsis;
larghezza: 190px;
bordo: 1px nero solido;

p: hover
Overflow: visibile;

Per entrambi i paragrafi abbiamo impostato il spazio bianco proprietà a nowrap E overflow proprietà a nascosto. Tuttavia, il primo

L'elemento mostra il funzionamento del valore della clip della proprietà text-overflow e il secondo

L'elemento dimostra il valore ellissi della proprietà text-overflow. Oltre a questo ogni volta che l'utente si libra sui paragrafi, verrà mostrato il testo nascosto.

Produzione

Il testo traboccante viene gestito utilizzando la proprietà.

Proprietà in modalità scrittura

Questa proprietà specifica la direzione del testo visualizzato nelle pagine Web. Ci sono due possibili direzioni che sono orizzontali o verticali.

Sintassi

Modalità di scrittura: Vertical-LR | Vertical-Rl | orizzontale-tb | ereditare;

Il testo viene visualizzato verticalmente usando il verticale-lr Il valore viene letto da sinistra a destra, verticalmente.
Il testo viene visualizzato verticalmente usando il Vertical-Rl Il valore viene visualizzato da destra a sinistra, verticalmente.

Nel frattempo, il valore orizzontale-TB Visualizza il testo in orizzontale dall'alto verso il basso.

Esempio
Considera l'esempio di seguito.

Html

Esempio di TB orizzontale

Esempio di Vertical-LR

Esempio di Vertical-Rl

Qui ne abbiamo creati tre

elementi per illustrare il funzionamento di diversi valori in modalità di scrittura.

CSS

P
bordo: 1px nero solido;
larghezza: 200px;

.tb
Modalità di scrittura: TB orizzontale;
Altezza: 160px;

.lr
Modalità di scrittura: Vertical-LR;
Altezza: 160px;

.rl
Modalità di scrittura: Vertical-RL;
Altezza: 160px;

Usando le varie classi assegnate a ciascuno dei

elemento stiamo impostando diverse modalità di scrittura per loro.

Produzione

Il testo è stato visualizzato utilizzando varie modalità di scrittura.

Proprietà Word-Wrap

Quando una parola è troppo lunga, trabocca oltre l'area specificata di un elemento, tuttavia, usando la proprietà di Word-Wrap, quella parola è divisa e avvolta attorno alla riga successiva.

Sintassi

Word-Wrap: normale | Break-word | ereditare;

Il valore normale divide la parola in punti specificati, nel frattempo il valore di pausa rompe le parole infrangibili.

Esempio
Considera l'esempio seguente per comprendere il funzionamento della proprietà di Word-Wrap.

Html

Senza proprietà di word-wrap

Il contenuto di questo paragrafo è
veeeeerrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy loooooooooooooooooooooooonnnnnnnnnnnnnnngggggggggggg

Con Word-Wrap: Break-Word;

Il contenuto di questo paragrafo è
veeeeerrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy loooooooooooooooooooooooonnnnnnnnnnnnnnngggggggggggg

Qui ne abbiamo creati due

elementi e hanno messo alcune lunghe parole in essi.

CSS

.p1
larghezza: 11em;
Bordo: 2px Solid #000000;

.p2
larghezza: 11em;
Bordo: 2px Black solido;
Word-Wrap: Break-Word;

Nel codice sopra, stiamo dando sia il

elementi un po 'di larghezza e bordo e anche noi stiamo applicando la proprietà di Word-Wrap sul secondo

elemento.

Produzione

La proprietà Word-Wrap funziona correttamente.

Proprietà delle parole

La proprietà di Word-Break gestisce come le parole dovrebbero dividersi alla fine di una linea.

Sintassi

Word-Break: Keep-All | Break-All | normale | ereditare;

Il valore toccante divide una parola in modo predefinito, mentre il valore di rottura divide le parole in punti casuali per evitare l'overflow.

Esempio
Considera l'esempio seguente per comprendere il funzionamento della proprietà di Word-Break.

Html

Word-Break: Keep-All;

Apprendimento degli effetti di testo in CSS

Word-Break: Break-All;

Effetti di apprendimento nel CSS

Qui abbiamo semplicemente creato due

elementi e hanno messo alcuni contenuti in essi.

CSS

.p1
larghezza: 120px;
Bordo: 2px Solid #000000;
Word-Break: Keep-All;

.p2
larghezza: 120px;
Bordo: 2px Solid #000000;
Word-Break: Break-All;

Al primo paragrafo è stato assegnato il valore Keep-All, nel frattempo al secondo paragrafo è stato assegnato il valore di rottura.

Produzione

I diversi valori della proprietà di Word-Break sono verificati e funzionano correttamente.

Conclusione

È possibile aggiungere effetti sul testo che appare su pagine Web utilizzando le proprietà fornite da CSS come proprietà di testo su flusso di testo, proprietà in modalità di scrittura, proprietà di word-wrap e proprietà. La proprietà di testo su flusso descrive ciò che accade al testo traboccante, la proprietà in modalità di scrittura specifica la direzione del testo, la proprietà di Word-Wrap divide le parole e avvolta attorno alla riga successiva e la proprietà di Word-Break gestisce il modo in cui le parole dovrebbero dividere Alla fine di una linea. Tutte queste proprietà sono spiegate in modo approfondito in questa guida insieme a pertinenti