Kako spremeniti privzeto prelivanje besedila s HTML in CSS

Za razliko od papirja, lahko spletne strani skoraj neskončno se raztezajo vstran. Kolikor je impresivno, to ni nekaj, kar resnično potrebujemo med branjem. Brskalniki zavijejo besedilo glede na širina vsebnika za besedilo in širino zaslona tako da bomo lahko videli celotno besedilo, ne da bi se morali veliko pomikati vstran (samo navzdol).

Zavijanje je nekaj, kar brskalniki počnejo ob upoštevanju številnih dejavnikov, kot so jezik besedila ali postavitev ločil in presledkov ne pritiskajte le navzdol kar se ne ujema z okvirom, določenim za vsebino besedila.

Razen zavijanja, brskalniki tudi skrbite za prostore; združujejo več zaporednih presledkov v izvorni kodi v en sam prostor na upodobljeni strani, prav tako pa registrirajo prisilne prekinitve vrstice pred začetkom dela na zavijanju.

Kdaj spremeniti privzeto prelivanje besedila

To je vse super in zelo cenjeno. Vendar pa lahko enostavno končamo v okoliščinah, ko privzeto obnašanje brskalnika ni tisto, kar iščemo. To je lahko naslov ne bi smeli biti oviti ali besedo v odstavku, ki bolje, da se zdrobimo kot spustimo črto, zapušča nenavaden prazen prostor na koncu vrstice.

Lahko se tudi zgodi, da smo samo obupani potrebujemo tiste prostore, ki so ohranjeni v našem besedilu, vendar jih brskalnik še vedno združuje v enega in nas sili, da dodamo več v izvorni kodi.

Možne so tudi nastavitve zavijanja spremeniti z jezikom in namenom besedila. Mandarinski članek z novicami in francoska pesem ni nujno treba zaviti na popolnoma enak način.

Obstaja precej CSS lastnosti (in elementov HTML!), Ki jih lahko nadzor zavijanja in prekinitvenih točk in tudi določite, kako se obdelajo presledki in prelomi vrstic pred ovijanjem.

Možnosti mehkega zavijanja in prelomi mehkega zavijanja

Brskalniki se odločijo, kje preliti besedilo odvisno od mej besed, vezajev, zlogov, ločil, presledkov in več. Ti kraji se imenujejo možnosti mehkega zavijanja in ko brskalnik razdeli besedilo na enem takem mestu, se prelom imenuje a mehak zavoj.

Najenostavnejši način silite dodaten odmor lahko naredimo z uporabo dobre stare
element.

Presledek

Če ste seznanjeni z beli prostor Lastnost CSS Stavim, da ste jo prvič spoznali na enak način kot mnogi drugi; med iskanjem poti preprečite ovijanje besedila. The nowrap vrednost. \ t beli prostor to točno počne.

Vendar pa beli prostor lastnina je več kot le zavijanje. Najprej, kaj je presledek? Je niz presledkov. Vsak prostor v setu razlikujejo med seboj dolžino, smer ali oboje.

Tipičen enojni horizontalni prostor dodamo s pritiskom tipke preslednice. Tudi tipka Tab doda a podoben prostor, vendar z večjo dolžino. Tipka Enter doda a navpični prostor za zagon nove vrstice in v HTML doda a en sam nezlomljiv prostor na spletne strani. Tako je veliko vrst prostorov, ki sestavljajo “presledek”.

Kot sem omenil na začetku, brskalniki strni več presledkov (tako horizontalno kot vertikalno) v viru v en prostor. Oni tudi razmislite o teh prostorskih znakih za možnosti ovijanja (mesta, kjer je mogoče besedilo oviti), ko je potrebno zavijanje.

In prav s temi dejavnostmi brskalnika lahko nadzorujemo beli prostor. Upoštevajte, da beli prostor lastnost ne vpliva na vse vrste prostora, najbolj pogoste kot so običajen horizontalni enojni presledek, prostor tabulatorja in viri vrstic.

Spodaj si lahko ogledate sliko vzorca besedila, ki je zaviti v brskalnik, da se prilega v vsebnik. Preliv se zgodi na dnu posode in preliv besedilo je različno obarvan. Opazili boste kolaps zaporednih prostorov v kodi.

 
 â ?? Zdravo. â ?? Zdravo. â ?? Pozdravljeni â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? zdravo. 

 .textContainer širina: 500px; višina: 320px;  

Po uporabi beli prostor: nowrap; pravilo, se zavijanje besedila spremeni na naslednji način:

 .textContainer / *… * / white-space: nowrap;  

The pre vrednost. \ t beli prostor ohranja vse presledke in preprečuje ovijanje besedila:

 .textContainer / *… * / white-space: pre;  

The predhodno ovijte vrednost. \ t beli prostor ohranja vse presledke in besedilo:

 .textContainer / *… * / white-space: pre-wrap;  

Končno, vnaprej vrednost. \ t beli prostor ohranja navpične presledke nove linije in besedilo:

 .textContainer / *… * / white-space: predpora;  

Besedni prelomi

Druga pomembna lastnost CSS, ki jo morate poznati za nadzor prelivanja besedila, je prelom besed. Na vseh zgornjih posnetkih zaslona lahko vidite brskalnik besedilo pred besedo “zdravo” na desni strani besedilo je preplavljeno. Brskalnik ni prekinil besede.

Vendar, če ste moram dovolite lomljenje črk v besedi da bi besedilo izgledalo celo na desni strani, morate uporabiti prelomi vse vrednost za. \ t prelom besed lastnina:

 .textContainer / *… * / word-break: break-all;  

The prelom besed lastnina ima tretjo vrednost prelomi vse in normalno (pripadajo privzeti prekinitvi vrstice). The ohraniti vse vrednost ne dovoljuje lomljenja besed.

Morda ne boste mogli videti učinka ohraniti vse v angleščini. Toda v jezikih, kjer so črke v besedi samostojnih enot, lahko brskalnik prekine besede pri ovijanju in to lahko preprečite ohraniti vse.

Na primer, črke v korejskih besedah, prvotno lomljen za zavijanje, hranijo skupaj ko beli prostor: obdrži vse; je določeno pravilo.

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

 .textContainer / *… * / word-break: obdrži vse;  

Ta lastnost lahko podpira klicano drugo vrednost prelomna beseda v prihodnosti. Videli boste, kako prelomna beseda deluje pozneje, v “Prelivna obloga” tega člena.

Word break možnosti

Razvijalci lahko tudi dodajte ovijalne možnosti znotraj besed, uporabljati Element HTML. Če mora brskalnik zaviti besedilni niz, bo upošteval mesto, kjer je prisotna za priložnost za zavijanje.

 
 â ?? Zdravo. â ?? Zdravo. â ?? Hello â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? Zdravo. â ?? zdravo. 
 

 .textContainer / *… * / white-space: pre-wrap;  

Brez , celota “zdravo” beseda bi bila upodobljena v novi vrstici. Z dodajanjem V HTML kodo smo brskalnik obvestili, da v tem trenutku je v redu razčleniti besedo za zavijanje, če je potrebno.

Vezi

The vezaji Lastnost CSS je drug način za nadzor prelomov med črkami v besedi. Imamo ločen članek o deljenju CSS, če vas zanima. Na kratko, lastnina vam omogoča ustvarjanje priložnosti za ovijanje z deljenjem.

Njegova samodejno vrednost zahteva brskalnik po potrebi samodejno delite in razbijate besede med zavijanjem. The priročnik vrednost prisili brskalnike zavijte (če je potrebno) na priložnosti za deljenje besed, ki smo jih dodali, kot je znak za vezaj (‐) ali ­ (mehko vezaj). Če nobena je bila dana vrednost brez ovijanja v bližini vezajev.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / *… * / -webkit-vezaji: auto; -ms-vezaji: auto; vezaji: auto;  

Prelivna obloga

The preliv Lastnost CSS nadzoruje, če a brskalnik lahko uniči besede (ali ohranjeni prostori, podpora za katere se lahko zgodi v bližnji prihodnosti) ob prelivanju. Ko prelomna beseda vrednost za preliv, beseda bo prekinjena v primeru ne najdete drugih možnosti mehkega zavijanja v vrstici.

Upoštevajte, da preliv znan tudi kot besedna prevleka (so vzdevki).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / overflow-wrap: break-word;  

Med črkami v zgornji HTML kodi ni prostora (torej ni možnosti za ovijanje) besedilo ni bilo prvotno ovito ohranjena kot ena beseda.

Vendar, ko je bilo dovoljenje dano za ovijanje besedila z lomljenjem besed (tj prelomna beseda vrednost preliv), zavijanje se je zgodilo s prekinitvijo cele vrvice kjer je bilo potrebno.