Come avvolgere il testo su una nuova riga in CSS

I testi lunghi possono apparire incontrollabili durante il web design. Ma possono anche essere inevitabili e talvolta finiscono per attraversare i confini. Questo può creare un Document Object Model (DOM) sciolto con un overflow non necessario che non è user-friendly.

Ma ecco la buona notizia: puoi gestire testi così lunghi avvolgendoli su una nuova riga usando i CSS. Qui ti mostreremo come avvolgere testi lunghi e ininterrotti con i CSS.

Come funziona il testo a capo CSS

CSS gestisce le parole lunghe allungate usando l'inbuilt a capo automatico o overflow-wrap proprietà.

come scaricare i film di amazon prime su pc

Tuttavia, quando non sono controllati, i browser gestiscono per impostazione predefinita testi così lunghi. Non avvolgeranno parole lunghe finché non riceveranno le istruzioni per farlo.

Correlati: cosa devi sapere sul DOM

Le due principali proprietà CSS menzionate in precedenza funzionano allo stesso modo e puoi usarle in modo intercambiabile. Tuttavia, accettano quattro valori o sintassi:

break-parola : Questa è l'attuale sintassi CSS che dice al browser di avvolgere un testo lungo su una nuova riga.
normale : Spezza ogni parola nei normali punti di separazione all'interno di un DOM. Non ha effetto sulle corde lunghe.
iniziale : è il modo predefinito del browser di gestire le stringhe. Come il normale sintassi, non interrompe le parole lunghe.
ereditare : Dice all'elemento figlio di ereditare la proprietà del suo genitore. Ma non funziona ancora con testi lunghi, tranne che per l'applicazione break-parola all'elemento genitore.

Come avvolgere parole lunghe usando il ritorno a capo CSS

Spostare le parole su una nuova riga con i CSS è facile e non richiede complicate modifiche CSS per funzionare.

Ad esempio, il lungo h2 il testo all'interno del contenitore di testo nell'immagine di esempio in basso attraversa la linea di confine:

Vediamo come possiamo avvolgerlo nella riga successiva usando il a capo automatico Proprietà CSS:

HTML :

  
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

CSS :

.wrap-it{  
word-wrap: break-word;  
}

Dopo aver avvolto il lungo h2 testo nell'immagine di esempio, ecco l'output:

Questo è tutto! Ora sai come avvolgere le parole su una nuova riga all'interno del tuo DOM usando i CSS.

come recuperare i vecchi messaggi di facebook

Correlati: Come scegliere come target parte di una pagina Web utilizzando i selettori CSS

Tuttavia, come affermato in precedenza, a capo automatico e overflow-wrap funzionano allo stesso modo e accettano proprietà simili.

Usare overflow-wrap invece, basta sostituire a capo automatico con esso.

È importante avvolgere le parole su una pagina Web

Oltre ad aggiungere più estetica alla tua pagina web, il wrapping dei testi compatta il DOM. Anche se controlli cosa va nella sezione dei tuoi contenuti, gli utenti possono pubblicare link o altre parole che non rientrano nel tuo contenitore di testo o nel tuo intero DOM.

Pertanto, è necessario applicare il ritorno a capo a tale sezione per mantenere intatto il DOM.

come aggiornare gli emoji sui telefoni lg

Condividere Condividere Tweet E-mail Come utilizzare le query multimediali in HTML e CSS per creare siti Web responsive

Vuoi rendere fantastico il tuo sito web sui dispositivi mobili? È ora di imparare a utilizzare le query multimediali nei CSS.

Leggi Avanti Argomenti correlati

Programmazione
CSS
Modello oggetto documento

Circa l'autore Idisou Omisola(94 articoli pubblicati)

Idowu è appassionato di qualsiasi tecnologia intelligente e produttività. Nel tempo libero gioca con la programmazione e quando si annoia passa alla scacchiera, ma ama anche staccare ogni tanto dalla routine. La sua passione per mostrare alle persone la tecnologia moderna lo motiva a scrivere di più.

Altro da Idowu Omisola

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti