Effetti di testo CSS
Overflow testo CSS , ritorno a capo automatico, regole di interruzione riga e modalità di scrittura
In questo capitolo imparerai le seguenti proprietà:
text-overflowword-wrapword-breakwriting-mode
Overflow di testo CSS
La proprietà CSS text-overflowspecifica in che modo il contenuto in overflow che non viene visualizzato deve essere segnalato all'utente.
Può essere tagliato:
Questo è un testo lungo che non entrerà nella casella
oppure può essere visualizzato come puntini di sospensione (...):
Questo è un testo lungo che non entrerà nella casella
Il codice CSS è il seguente:
Esempio
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
L'esempio seguente mostra come visualizzare il contenuto in overflow quando si passa il mouse sopra l'elemento:
Esempio
div.test:hover {
overflow: visible;
}
Avvolgimento di parole CSS
La proprietà CSS word-wrapconsente alle parole lunghe di essere spezzate e di passare alla riga successiva.
Se una parola è troppo lunga per rientrare in un'area, si espande all'esterno:
Questo paragrafo contiene una parola molto lunga: questa è una parola molto molto molto molto molto molto lunga. La parola lunga si interromperà e andrà a capo alla riga successiva.
La proprietà word-wrap ti consente di forzare il ritorno a capo del testo, anche se ciò significa dividerlo nel mezzo di una parola:
Questo paragrafo contiene una parola molto lunga: questa è una parola molto molto molto molto molto molto lunga. La parola lunga si interromperà e andrà a capo alla riga successiva.
Il codice CSS è il seguente:
Esempio
Consenti alle parole lunghe di poter essere spezzate e passare alla riga successiva:
p {
word-wrap: break-word;
}
Rottura di parole CSS
La proprietà CSS word-breakspecifica le regole di interruzione di riga.
Questo paragrafo contiene del testo. Questa riga si interromperà con i trattini.
Questo paragrafo contiene del testo. Le linee si interromperanno a qualsiasi carattere.
Il codice CSS è il seguente:
Esempio
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Modalità di scrittura CSS
La proprietà CSS writing-modespecifica se le righe di testo sono disposte orizzontalmente o verticalmente.
Del testo con un elemento span con a verticale-rl modalità di scrittura.
L'esempio seguente mostra alcune diverse modalità di scrittura:
Esempio
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Proprietà degli effetti di testo CSS
La tabella seguente elenca le proprietà dell'effetto di testo CSS:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |