Kaip pakeisti numatytąjį teksto įvyniojimą su HTML ir CSS

Skirtingai nuo popieriaus, tinklalapiai gali būti beveik be galo išilgai į šoną. Kiek įspūdingas, tai yra, tai nėra kažkas, ko mums tikrai reikia skaityti. Naršyklės įveda tekstą, priklausomai nuo teksto konteinerio plotis ir ekrano plotis taip, kad galėtume matyti visą tekstą, nereikia slinkti į šoną (tik žemyn).

Vyniojimas tai, ką naršyklės daro atsižvelgdamos į daugelį veiksnių, pvz., teksto kalbą ar skyrybos ir tarpų išdėstymą ne tik stumkite žemyn kas netelpa teksto turiniui skirtame laukelyje.

Be pakavimo, naršyklės taip pat rūpintis erdvėmis; jie sujungia keletą iš eilės esančių šaltinių kodo į vieną erdvę pateiktame puslapyje, ir jie taip pat užregistruoja priverstines linijų pertraukas, prieš pradėdami dirbti pakuotėje.

Kada pakeisti numatytąjį teksto įvyniojimą

Tai viskas puiku ir labai vertinama. Tačiau mes galime lengvai pasiekti aplinkybes, kai numatytasis naršyklės elgesys nėra tas, ko ieškome. Tai gali būti antraštė neturėtų būti suvynioti arba žodį pastraipoje geriau sugadinti, nei nusileisti linijoje, linijos pabaigoje paliekant nelyginę tuščią erdvę.

Taip pat gali atsitikti, kad mes tiesiog beviltiškai reikia tų erdvių, išsaugotų mūsų tekste, tačiau naršyklė juos sujungia į vieną, verčia mus pridėti kelis kodą.

Be to, gali būti ir įvyniojimo nuostatos keisti teksto kalbą ir paskirtį. Mandarinų naujienų straipsnis ir prancūzų eilėraštis nebūtinai turi būti suvynioti taip pat.

Yra nemažai CSS savybių (ir HTML elementų!), Kurie gali kontroliuoti vyniojimą ir taškus ir taip pat apibrėžti, kaip prieš vyniojimą apdorojamos erdvės ir linijos pertraukos.

„Soft wrap“ galimybės ir minkštos plėvelės pertraukos

Naršyklės nusprendžia, kur supakuoti perpildytą tekstą priklausomai nuo žodžio ribų, brūkšnelių, skiemenų, skyrybos ženklų, tarpų ir daugiau. Visos šios vietos vadinamos minkštos plėvelės galimybės ir kai naršyklė sulaužo tekstą vienoje tokioje vietoje, pertrauka vadinama a minkšta plėvelė.

Paprasčiausias būdas priversti papildomą pertrauką gali būti padaryta naudojant senus
elementas.

Balta vieta

Jei esate susipažinę su balta vieta CSS nuosavybė, kurią galiu statyti, pirmiausia jį žinojo kaip ir daugelis kitų; ieškodami būdų užkirsti kelią teksto įvyniojimui. The krapštukas vertė balta vieta tai daro tiksliai.

Tačiau balta vieta nuosavybė yra daugiau nei tik įvyniojimas. Pirmiausia, kas yra erdvė? Tai yra erdvės simbolių rinkinys. Kiekviena rinkinio vieta skiriasi ilgis, kryptis arba abu.

Tipiškas vienas horizontalus erdvės simbolis tai, ką mes įtraukiame paspausdami tarpo klavišą. Tab mygtukas taip pat prideda a panaši erdvė, bet didesnio ilgio. Įvedimo klavišas priduria a vertikali erdvė pradėti naują eilutę, ir HTML prideda a viena neperleidžiama erdvė į tinklalapius. Kaip ir tai, yra daug erdvių, kurios sudaro “balta vieta”.

Kaip minėjau pradžioje, naršyklės žlugti kelias erdves (tiek horizontaliai, tiek vertikaliai) šaltinyje į vieną erdvę. Jie taip pat apsvarstyti šiuos erdvės simbolius įvyniojimo galimybėms (kai tekstą galima įvynioti), kai reikia pakuoti.

Ir būtent šiuos naršyklės veiksmus galime kontroliuoti balta vieta. Atkreipkite dėmesį, kad balta vieta nuosavybė neturi įtakos visoms erdvėms, tik dažniausiai pasitaikantys pvz., reguliarios horizontalios vienos erdvės, skirtukų erdvės ir linijų kanalai.

Žemiau galite matyti pavyzdinio teksto ekrano kopiją apvyniotas naršyklėje, kad tilptų jo talpykloje. Perpildymas įvyksta konteinerio apačioje, o perpildytas tekstas dažomas skirtingai. Jūs pastebėsite iš eilės esančių erdvių žlugimas kodą.

 
 â� Sveiki. â� Sveiki. â� Sveiki â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. 

 .textContainer plotis: 500px; aukštis: 320px;  

Pritaikius baltoji erdvė: krapštukas; taisyklė, teksto įvyniojimas keičiamas taip:

 .textContainer / *… * / baltoji erdvė: krapštukas;  

The iš anksto vertė balta vieta išsaugo visas vietas ir apsaugo teksto įvyniojimą:

 .textContainer / *… * / balta erdvė: iš anksto;  

The iš anksto suvynioti vertė balta vieta išsaugo visas vietas ir tekstą:

 .textContainer / *… * / balta erdvė: išankstinis įvyniojimas;  

Galiausiai, iš anksto linija vertė balta vieta išsaugo vertikalias vietas pavyzdžiui, naujos linijos ir tekstą:

 .textContainer / *… * / balta erdvė: iš anksto linija;  

Žodžių pertraukos

Kita svarbi CSS savybė, kurią turėtumėte žinoti valdydami teksto įvedimą, yra žodžių pertrauka. Visuose aukščiau esančiuose ekrano vaizduose galite pamatyti naršyklę supakuotas tekstas prieš žodį “Sveiki” dešinėje pusėje, po kurios tekstas perpildytas. Naršyklė nepažeidė žodžio.

Tačiau, jei jūs privalau leiskite raidėms pažeisti žodį taip, kad tekstas atrodytų net dešinėje, jums reikia naudoti pertrauka vertė žodžių pertrauka nuosavybė:

 .textContainer / *… * / žodžių pertrauka: pertrauka;  

The žodžių pertrauka nuosavybė turi trečią vertę pertrauka ir normalus (priklauso numatytai eilutės pertraukai). The išlaikyti viską vertė neleidžia žlugti žodžių.

Gali būti, kad negalėsite matyti išlaikyti viską angliškai. Tačiau kalbomis, kuriose yra raidės prasmingus vienetus, naršyklė gali sulaužyti žodžius, kai jie vyniojami, ir tai galima išvengti naudojant išlaikyti viską.

Pavyzdžiui, raidės korėjiečių kalbomis, iš pradžių buvo sugadintas, yra laikomi kartu kai balta erdvė: išlaikyti viską; taisyklė.

ìÂ?¸ÃªÂ³Â   ¥¼ Â-Â-Â¥Â-Â? Â? Â? Â? Â?¬Â?   Â? Â?¬Â½Â? Ã? Â?¡Â? Â-Â?¬Â Â-ìÂ?¬Â?¤. ì    10 Â? ìÂ?   Â? Â?¬Â½Â? Ã? êµÂ-ìÂ? Â-Â?¬Â?ª° °? 1997 «…? 3ìÂ? 10a¬Â?¼Ã «Â¶Â    °  ° 12ìÂ?¼ÃªÂ¹Â? ì§Â? à Â? Â… ìÂ?¼Ã¬Â? à «Â§Â? ìÂ?¸Ã¬Â¦Â? ìÂ-Â? ìÂ? ìÂ-´à «Â¦Â½Â Â? Â?¤. ì§Â? ê¸Â? à    ± à ¡Â? Ã? Â?¬Â Â-ìÂ?¬Â?¤. ìÂ?´ Â-Â?¬Â?¬Â-Â? ìÂ? Â? Â? ìÂ-Â… ê³Â? ì    ° °?¬Â? ì    ¬¸ê     Â?¤Ã¬Â?´ Â-Â?¨ÃªÂ? à «ÂªÂ¨Ã¬Â-¬  Â?¤Ã¬Â?ªÂ³Â¼ ê ° Â? ìÂ? à «Â¶Â? ìÂ?¼Ã «Â¥Â¼  Â?¤Ã «Â £¹Â Â? Â?¤.

 .textContainer / *… * / žodžių pertrauka: išlaikyti viską;  

Ši savybė gali palaikyti kitą vadinamąją vertę žodis ateityje. Pamatysite, kaip žodis veikia vėliau, “Perpildymo įvyniojimas” skyriuje.

Žodžio pertraukos galimybės

Programuotojai taip pat gali pridėti žodžių žodžių galimybes, naudojant HTML elementas. Jei naršyklė turi suvynioti teksto eilutę, ji apsvarstys vietą, kurioje yra pakavimo galimybei.

 
 â� Sveiki. â� Sveiki. â� Hello â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. 
 

 .textContainer / *… * / balta erdvė: išankstinis įvyniojimas;  

Be , visas “Sveiki” žodis būtų pateiktas nauja eilute. Pridedant HTML kodą mes informavome naršyklę tai yra gerai, kad pažeistumėte žodį tuo metu, jei tai būtina.

Brūkšneliai

The brūkšneliai CSS nuosavybė yra dar vienas būdas kontroliuoti pertraukas tarp raidžių žodyje. Jei jus domina, turime atskirą straipsnį apie CSS brūkšnį. Trumpai tariant, nuosavybė leidžia sukurti pakavimo galimybes per brūkšnį.

Jo automatinis vertė verčia naršyklę prireikus automatiškai sujungia ir nutraukia žodžius vyniojimo metu. The vadovas vertė verčia naršykles suvyniokite (jei reikia) prie mums suteiktų brūkšnių galimybių, pvz., brūkšnelio simbolis (‐) arba ­ (minkšta brūkšnelė). Jei nė vienas buvo pateikta kaip vertė nėra brūkšnelių pakavimo.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse mėlynas namas mėlynas namas mėlynas namas mėlynas namas mėlynas namas 
 

 .textContainer / *… * / -webkit-brūkšneliai: auto; -ms-brūkšneliai: auto; brūkšneliai: auto;  

Perpildymo įvyniojimas

The perpildymas CSS nuosavybės kontrolė, jei a naršyklė gali sulaužyti žodžius (arba išsaugotos erdvės, kurių palaikymas gali įvykti artimiausioje ateityje) dėl perpildymo. Kai žodis vertė yra pateikta perpildymas, žodis bus sugadinta tuo atveju jokios kitos minkštos plėvelės galimybės nerandamos linijoje.

Prisimink tai perpildymas taip pat žinomas kaip žodis (jie yra slapyvardžiai).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / perpildymo plėvelė: break-word;  

Jei tarp HTML kodo raidžių nėra tarpo (t. Y. Be pakavimo galimybių), tekstas nebuvo suvyniotas į pirmąjį ir buvo išsaugotas kaip vienas žodis.

Tačiau, kai buvo suteiktas leidimas tekstui apvynioti, sulaužant žodžius (t. Y žodis vertė buvo suteikta perpildymas), vyniojimas įvyko nutraukiant visą eilutę kur tai buvo būtina.