Allineamento, decorazione e spaziatura del testo
Allineate il testo, aggiungete sottolineature o barrature e controllate la spaziatura tra lettere e righe.
Allineamento, decorazione e spaziatura del testo è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
text-align
text-align controlla l'allineamento orizzontale del contenuto in linea all'interno di un contenitore a blocchi.
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
text-align: justify
justify estende le righe fino a occupare l'intera larghezza del contenitore aggiungendo spazio tra le parole. Lo utilizzi insieme a hyphens: auto per evitare spaziature irregolari nei contenitori stretti.
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
text-decoration
text-decoration aggiunge linee al testo. Viene usato comunemente per sottolineare i collegamenti o barrare il contenuto eliminato.
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
Forma estesa di text-decoration
text-decoration è una forma abbreviata per linea, stile, colore e spessore:
<a href="#">Wavy red underline link</a>
text-transform
text-transform modifica l'uso delle maiuscole e delle minuscole nel testo senza alterare l'HTML sottostante:
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
text-indent
text-indent rientra la prima riga di un elemento a blocchi. Utilizzi un valore negativo insieme a un padding corrispondente per nascondere il testo in modo accessibile (sostituzione di immagini).
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
white-space
white-space controlla la gestione degli spazi bianchi e delle interruzioni di riga presenti nell'HTML sorgente:
normal— comprime gli spazi bianchi e va a capo tra le parolenowrap— impedisce di andare a capopre— preserva gli spazi bianchi e non va a capopre-wrap— preserva gli spazi bianchi e consente di andare a capo
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
letter-spacing
letter-spacing imposta uno spazio aggiuntivo tra i caratteri. I valori positivi allontanano i glifi, mentre quelli negativi li avvicinano. Utilizzi em per un ridimensionamento proporzionale.
<p class="spaced">spaced heading text</p>
word-spacing
word-spacing aggiunge spazio tra le parole. È raramente necessario, ma può essere utile per regolare con precisione il testo giustificato o i titoli in evidenza.
<h1>Word Spaced Heading Example</h1>
text-overflow: ellipsis
Tronchi il testo che supera i limiti visualizzando i puntini di sospensione. Sono necessari overflow: hidden e white-space: nowrap.
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
Testo verticale con writing-mode
writing-mode ruota la direzione del flusso del testo. In combinazione con text-orientation, consente di creare tipografia verticale CJK o etichette ruotate per scopi creativi.
<div class="label">Vertical Label Text</div>
Verifica rapida
Quali tre proprietà sono necessarie per visualizzare i puntini di sospensione quando il testo supera i limiti?
Riepilogo
text-align posiziona il contenuto in linea nel relativo contenitore. text-decoration aggiunge o rimuove linee. text-transform modifica l'uso delle maiuscole e delle minuscole. white-space: nowrap + overflow: hidden + text-overflow: ellipsis è la ricetta classica per troncare il testo.
Domande Frequenti
La lezione «Allineamento, decorazione e spaziatura del testo» è gratuita?
Sì — il testo completo di «Allineamento, decorazione e spaziatura del testo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Allineamento, decorazione e spaziatura del testo»?
Allineate il testo, aggiungete sottolineature o barrature e controllate la spaziatura tra lettere e righe. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Allineamento, decorazione e spaziatura del testo»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Famiglie di caratteri e font web-safe
- Dimensione, peso e stile del carattere
- Allineamento, decorazione e spaziatura del testo
- Google Fonts e @font-face