Kuidas teksti CSS -is uuele reale mähkida

Kuidas teksti CSS -is uuele reale mähkida

Pikad tekstid võivad veebidisaini ajal tunduda kontrollimatud. Kuid need võivad olla ka vältimatud ja mõnikord ületavad nad piire. See võib tekitada lahtise dokumendiobjektimudeli (DOM) koos tarbetu ületäitumisega, mis pole kasutajasõbralik.





Kuid siin on hea uudis: saate selliste pikkade tekstidega hakkama saada, pakkides need CSS -i abil uuele reale. Siin näitame teile, kuidas pikki katkematuid tekste CSS -iga pakkida.



Kuidas CSS -i tekstipakkimine toimib?

CSS käsitleb venitatud pikki sõnu sisseehitatud abil sõnapael või ülevool-mähis vara.



kuidas kasutada xboxis bluetooth kõrvaklappe

Kui brauserid seda ei kontrolli, käsitlevad nad aga vaikimisi nii pikki tekste. Nad ei mähi pikki sõnu enne, kui on saanud juhised seda teha.

Seotud: Mida peate teadma DOM -i kohta



Kaks varem mainitud CSS -i atribuuti töötavad samamoodi ja saate neid vaheldumisi kasutada. Siiski aktsepteerivad nad nelja väärtust või süntaksit.

  • murdesõna : See on tegelik CSS -i süntaks, mis käsib brauseril pika teksti uuele reale ümber panna.
  • normaalne : See katkestab iga sõna DOM -i tavapärastes eralduskohtades. See ei mõjuta pikki nööre.
  • esialgne : See on brauseri vaikimisi stringide käsitsemise viis. Nagu normaalne süntaks, see ei murra pikki sõnu.
  • pärida : See käsib lapseelemendil pärida oma vanema vara. Kuid pikkade tekstidega see ikkagi ei tööta, välja arvatud juhul, kui kandideerite murdesõna emaelemendile.

Pikkade sõnade pakkimine CSS Word Wrapi abil

Sõnade pakkimine uuele reale CSS -iga on lihtne ja ei nõua tülikaid CSS -i muudatusi.



Näiteks pikk h2 tekst allpool oleva näidispildi tekstikonteineris ületab piirijoone:

Vaatame, kuidas saame selle järgmisele reale mähkida, kasutades sõnapael CSS -i atribuut:



HTML :


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

CSS :

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

Pärast mähkimist pikk h2 tekst näidispildil, siin on väljund:

See on kõik! Nüüd teate, kuidas CSS -i abil sõnad oma DOM -i uuele reale mähkida.

kunagi googeldades tee põhjalik otsing

Seotud: Kuidas veebisaidi osa sihtida CSS -i valijate abil

Kuid nagu varem öeldud, sõnapael ja ülevool-mähis töötavad samamoodi ja aktsepteerivad sarnaseid omadusi.

Kasutada ülevool-mähis selle asemel lihtsalt asendage sõnapael sellega.

Oluline on sõnad veebilehele mähkida

Lisaks sellele, et lisada oma veebilehele rohkem esteetikat, tihendab tekstide pakkimine DOM -i. Isegi kui kontrollite oma sisujaotise sisu, saavad kasutajad postitada linke või muid sõnu, mis ei mahu teie tekstikonteinerisse või kogu teie domeeni.

Seetõttu on sellisele jaotisele tekstimähise rakendamine vajalik, et DOM puutumata jääks.

arvuti ei tunne välist kõvaketast ära
Jaga Jaga Piiksuma E -post Kuidas kasutada meediumipäringuid HTML -is ja CSS -is reageerivate veebisaitide loomiseks

Kas soovite muuta oma veebisaidi mobiilseadmetes hämmastavaks? On aeg õppida kasutama meediapäringuid CSS -is.

Loe edasi Seotud teemad
  • Programmeerimine
  • CSS
  • Dokumendi objekti mudel
Autori kohta Idisou Omisola(Avaldatud 94 artiklit)

Idowu on kirglik kõige nutika tehnoloogia ja tootlikkuse vastu. Vabal ajal mängib ta kodeerimisega ja lülitab malelauale, kui tal on igav, kuid talle meeldib ka aeg -ajalt rutiinist lahti saada. Tema kirg näidata inimestele teed kaasaegses tehnoloogias motiveerib teda rohkem kirjutama.

Veel Idowu Omisolast

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin