Cum să înfășurați textul pe o nouă linie în CSS

Textele lungi pot apărea de necontrolat în timpul proiectării web. Dar pot fi și ele inevitabile și uneori ajung să treacă granițele. Acest lucru poate crea un model de obiecte de documente (DOM) cu un overflow inutil care nu este ușor de utilizat.

Dar iată veștile bune: puteți face față unor texte atât de lungi înfășurându-le pe o nouă linie folosind CSS. Aici vă vom arăta cum să înfășurați texte lungi, neîntrerupte, cu CSS.

Cum funcționează CSS Text Wrap

CSS gestionează cuvinte lungi întinse folosind funcția încorporată word-wrap sau overflow-wrap proprietate.

cum să întrerupeți istoricul vizionărilor pe YouTube

Cu toate acestea, atunci când nu sunt controlate, browserele gestionează în mod implicit astfel de texte lungi. Nu vor încheia cuvinte lungi până nu vor primi instrucțiunea de a face acest lucru.

Related: Ce trebuie să știți despre DOM

Cele două proprietăți majore CSS menționate anterior funcționează în același mod și le puteți utiliza în mod interschimbabil. Cu toate acestea, acceptă patru valori sau sintaxe:

break-word : Aceasta este sintaxa CSS reală care îi spune browserului să înfășoare un text lung pe o nouă linie.
normal : Se rupe fiecare cuvânt în punctele normale de separare într-un DOM. Nu are efect asupra corzilor lungi.
iniţială : Este modul implicit al browserului de a gestiona șirurile. Ca normal sintaxă, nu rupe cuvinte lungi.
moşteni : Îi spune elementului copil să moștenească proprietatea părintelui său. Dar încă nu funcționează cu texte lungi, cu excepția cazului în care aplicați break-word la elementul părinte.

Cum să înfășurați cuvinte lungi folosind CSS Word Wrap

Împachetarea cuvintelor într-o nouă linie cu CSS este ușoară și nu necesită modificări greoaie CSS pentru a funcționa.

De exemplu, lungul h2 textul din containerul de text din imaginea mostră de mai jos trece linia de margine:

Să vedem cum o putem înfășura pe următoarea linie folosind word-wrap Proprietate CSS:

HTML :

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

CSS :

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

După înfășurarea lungului h2 text în imaginea mostră, iată rezultatul:

Asta e! Acum știți cum să înfășurați cuvinte pe o nouă linie din DOM-ul dvs. folosind CSS.

cum jocuri pe Xbox

În legătură: Cum să vizați o parte a unei pagini web utilizând selectoare CSS

Cu toate acestea, după cum sa menționat anterior, word-wrap și overflow-wrap funcționează în același mod și acceptă proprietăți similare.

A folosi overflow-wrap în schimb, doar înlocuiți word-wrap Cu acesta.

Este important să înfășurați cuvinte pe o pagină web

În plus față de adăugarea mai multă estetică paginii dvs. web, împachetarea textelor compactează DOM. Chiar dacă controlați ce intră în secțiunea dvs. de conținut, utilizatorii pot posta linkuri sau alte cuvinte care nu se încadrează în containerul dvs. de text sau în întregul DOM.

Prin urmare, aplicarea textului la o astfel de secțiune este necesară pentru a menține DOM intact.

nu pot accesa uefi bios windows 10

Acțiune Acțiune Tweet E-mail Cum se utilizează interogări media în HTML și CSS pentru a crea site-uri web responsive

Doriți ca site-ul dvs. să arate uimitor pe dispozitivele mobile? Este timpul să învățați cum să utilizați interogări media în CSS.

Citiți în continuare Subiecte asemănătoare

Programare
CSS
Model de obiect document

Despre autor Idisou Omisola(94 articole publicate)

Idowu este pasionat de orice tehnologie inteligentă și productivitate. În timpul liber, se joacă cu codificarea și trece la tabla de șah când se plictisește, dar îi place, de asemenea, să se rupă de rutină din când în când. Pasiunea sa pentru a arăta oamenilor calea în jurul tehnologiei moderne îl motivează să scrie mai multe.

Mai multe de la Idowu Omisola

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona