Kako prenijeti tekst u novi redak u CSS -u

Kako prenijeti tekst u novi redak u CSS -u

Dugi tekstovi mogu izgledati nekontrolirano tijekom web dizajna. No, i oni mogu biti neizbježni, a ponekad završe i prelaskom granica. To može stvoriti labavi objektni model dokumenta (DOM) s nepotrebnim preljevom koji nije prilagođen korisniku.





No, evo dobrih vijesti: s tako dugim tekstovima možete se nositi ako ih umotate u novi redak pomoću CSS -a. Ovdje ćemo vam pokazati kako omotati dugačke, neprekinute tekstove pomoću CSS -a.



Kako funkcionira CSS prelom teksta

CSS rukuje rastegnutim dugim riječima pomoću ugrađenog umotavanje riječi ili overflow-wrap imovine.





mogu li saznati kome pripada telefonski broj?

Međutim, kada nisu kontrolirani, preglednici prema zadanim postavkama obrađuju tako dugačke tekstove. Neće zamotati dugačke riječi dok ne dobiju upute za to.

Povezano: Što trebate znati o DOM -u



Dva ranije spomenuta glavna svojstva CSS -a rade na isti način i možete ih koristiti naizmjenično. Međutim, prihvaćaju četiri vrijednosti ili sintakse:

  • prijelomna riječ : Ovo je stvarna CSS sintaksa koja govori pregledniku da prebaci dugi tekst u novi redak.
  • normalan : Razbija svaku riječ na normalnim točkama razdvajanja unutar DOM -a. Nema učinka na duge žice.
  • početni : To je zadani preglednički način rukovanja nizovima. Poput normalan sintaksa, ne lomi duge riječi.
  • naslijediti : Kaže djetetu element da naslijedi svojstvo svojih roditelja. Ali još uvijek ne funkcionira s dugim tekstovima, osim ako se prijavite prijelomna riječ na roditeljski element.

Kako omotati dugačke riječi pomoću CSS Word Wrap -a

Prebacivanje riječi u novi redak pomoću CSS -a jednostavno je i ne zahtijeva glomazna CSS podešavanja za rad.



Na primjer, dugo h2 tekst unutar spremnika teksta na slici ispod uzorka prelazi granicu:

Pogledajmo kako ga možemo prebaciti u sljedeći redak pomoću umotavanje riječi CSS svojstvo:



HTML :


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

CSS :

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

Nakon što je omotao dugo h2 teksta u uzorku slike, evo rezultata:

To je to! Sada znate prenijeti riječi u novi redak unutar DOM -a pomoću CSS -a.

Jeste li se ikada guglali, napravite dubinsko pretraživanje

Povezano: Kako ciljati dio web stranice pomoću CSS birača

Međutim, kako je ranije rečeno, umotavanje riječi i overflow-wrap rade na isti način i prihvaćaju slična svojstva.

Koristiti overflow-wrap umjesto toga, samo zamijenite umotavanje riječi s tim.

Važno je omotati riječi na web stranicu

Osim što dodaje dodatnu estetiku vašoj web stranici, pakiranje tekstova kompaktira DOM. Čak i ako kontrolirate što ulazi u odjeljak sa sadržajem, korisnici mogu objavljivati ​​veze ili druge riječi koje se ne uklapaju u vaš tekstualni spremnik ili cijeli DOM.

Stoga je primjena preloma teksta na takav odjeljak neophodna kako bi DOM ostao netaknut.

kako omogućiti youtube na alexa
Udio Udio Cvrkut E -pošta Kako koristiti medijske upite u HTML -u i CSS -u za stvaranje responzivnih web stranica

Želite učiniti da vaša web stranica izgleda nevjerojatno na mobilnim uređajima? Vrijeme je da naučite kako koristiti medijske upite u CSS -u.

Pročitajte Dalje Povezane teme
  • Programiranje
  • CSS
  • Objektni model dokumenta
O autoru Idisou Omisola(94 objavljena članka)

Idowu je strastven u bilo čemu pametnom tehnologiji i produktivnosti. U slobodno vrijeme igra se kodiranjem i prebacuje na šahovsku ploču kad mu je dosadno, ali također voli povremeno odustati od rutine. Njegova strast prema pokazivanju ljudi suvremene tehnologije motivira ga da piše više.

Više od Idowua Omisole

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu