CSS3 Text
CSS3 contiene diverse nuove funzionalità di testo.
In questo capitolo si apprenderanno le seguenti proprietà del testo:
-
text-overflow -
word-wrap -
word-break
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -o- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Text Overflow
Il CSS3 text-overflow proprietà specifica come overflow contenuto che non viene visualizzato dovrebbe essere segnalata per l'utente.
Può essere agganciato:
Questo è un testo lungo che non si adatta nella casella
oppure può essere reso come i puntini di sospensione (...):
Questo è un testo lungo che non si adatta 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;
} Prova tu stesso " L'esempio seguente mostra come è possibile visualizzare il contenuto in overflow quando si libra sopra l'elemento:
CSS3 Word Wrapping
Il CSS3 word-wrap proprietà permette lunghe parole per essere in grado di essere rotto e avvolgere sulla riga successiva.
Se una parola è troppo lungo per essere all'interno di una zona, si espande al di fuori:
Questo paragrafo contiene una parola molto lunga: thisisaveryveryveryveryveryverylongword . La parola lunga si romperà e capo alla riga successiva.
La proprietà word-wrap consente di forzare il testo per avvolgere - anche se ciò significa la divisione nel mezzo di una parola:
Questo paragrafo contiene una parola molto lunga: thisisaveryveryveryveryveryverylongword . La parola lunga si romperà e capo alla riga successiva.
Il codice CSS è il seguente:
Esempio
Consentire parole lunghe per poter essere rotto e avvolgere sulla riga successiva:
p {
word-wrap: break-word;
}
Prova tu stesso " CSS3 Word rottura
Il CSS3 word-break proprietà specifica normativa linea di rottura.
Questo paragrafo contiene del testo. Questa linea-break-a-trattini.
Questo paragrafo contiene del testo. Le linee si romperà in qualsiasi carattere.
Il codice CSS è il seguente:
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 »
Proprietà del testo CSS3
La seguente tabella elenca le nuove proprietà di testo CSS3:
| Proprietà | Descrizione |
|---|---|
| text-align-last | Specifica come allineare l'ultima riga di un testo |
| text-emphasis | Una scorciatoia per settare il testo-enfasi in stile e il testo-enfasi-colore in un dichiarazione |
| text-justify | Specifica come giustificato testo dovrebbe essere allineato e distanziati |
| text-overflow | Specifica il contenuto come in overflow che non viene visualizzato deve essere segnalato per l'utente |
| word-break | Specifica la violazione delle norme di linea per gli script non CJK |
| word-wrap | Consente parole lunghe per poter essere rotto e avvolgere sulla riga successiva |