Ako zmeniť predvolené balíky textu pomocou HTML a CSS

Na rozdiel od papiera, webové stránky môžu takmer nekonečne sa rozširujú na stranu. Akokoľvek pôsobivé, nie je to niečo, čo pri čítaní skutočne potrebujeme. Prehliadače zábal textu v závislosti na šírka kontajnera textu a šírka obrazovky takže môžeme vidieť celý text bez toho, aby sme museli posúvať po stranách veľa (len smerom nadol).

Obal je to niečo, čo prehliadače berú do úvahy veľa faktorov, napríklad jazyk textu alebo umiestnenia interpunkcie a medzery neplačte len čo sa nezmestí do rámčeka definovaného pre obsah textu.

Iné ako zabalenie, prehliadače tiež postarajte sa o priestory; spájajú viaceré po sebe idúce medzery v zdrojovom kóde do jedného miesta na vykreslenú stránku a pred započatím prác na obale sa tiež zaregistrujú prestávky s núteným riadkom.

Kedy zmeniť zmenu predvoleného textu

To je všetko skvelé a veľmi oceňované. Ale môžeme ľahko skončiť v situáciách, keď predvolené správanie prehliadača nie je to, čo hľadáme. Môže to byť titulok by nemali byť zabalené alebo slovo v odseku, ktoré lepšie zlomiť, než zostupovať, takže na konci linky zostáva zvláštny prázdny priestor.

Môže sa stať, že sme zúfalo potrebujú tieto priestory zachované v našom texte, ale prehliadač ich stále spája do jedného, ​​núti nás pridávať viac v zdrojovom kóde.

Možnosti balenia môžu byť tiež zmeniť s jazykom a účelom textu. Mandarinský článok a francúzska báseň nemusí byť nevyhnutne zabalené presne rovnakým spôsobom.

Existuje veľa CSS vlastností (a HTML elementov!), Ktoré môžu kontrolujte obal a body zlomu a tiež definujte, ako sa pred balením spracujú medzery a medzery.

Mäkké zábalové možnosti a mäkké zábaly

Prehliadače rozhodnú, kde sa má zabaliť pretečený text v závislosti od hraníc slov, spojovníkov, slabík, interpunkcií, medzery a ďalšie. Tieto miesta sú volané mäkké zábaly a keď prehliadač zlomí text na jednom takom mieste, prerušenie sa nazýva a mäkký zábal.

Najjednoduchší spôsob vynútiť dodatočnú prestávku môže byť vykonané pomocou starého dobrého
element.

Biely vesmír

Ak ste oboznámení s Biely vesmír Vlastnosť CSS Vsadím sa, že ste to najprv znali rovnakým spôsobom ako mnohí iní; pri hľadaní spôsobu zabrániť obálke textu. nowrap hodnota Biely vesmír presne to robí.

Avšak Biely vesmír vlastníctvo je viac ako len zabalenie. Po prvé, čo je medzera? Je to súbor priestorových znakov. Každý priestor v prístroji sú navzájom rôzne v dĺžke, smere alebo oboch.

Typické jediný znak horizontálneho priestoru je to, čo pridáme stlačením tlačidla medzerníka. Tlačidlo Tab tiež pridá a podobný priestor, ale s väčšou dĺžkou. Klávesou Enter sa pridá a vertikálny priestor začať nový riadok a v HTML pridáva a jediný nerozbitný priestor na webové stránky. Takto existuje veľa typov priestorov, ktoré tvoria “Biely vesmír”.

Ako som spomenul na začiatku, prehliadače zbaliť viaceré medzery (horizontálne i vertikálne) v zdroji do jedného priestoru. Oni tiež zvážte tieto medzery pre možnosti balenia (miesta, kde môže byť text zabalený), keď je potrebné zabaliť.

A práve tieto akcie prehliadača, s ktorými môžeme ovládať Biely vesmír. Všimnite si, že Biely vesmír Vlastnosť neovplyvňuje všetky druhy priestoru, len tie najčastejšie ako napríklad bežný horizontálny jednotný priestor, miesto na kariet a line feed.

Nižšie vidíte snímku obrazovky vzorového textu, ktorý je zabalené prehliadačom, aby sa zmestili vo vnútri kontajnera. Pretekanie sa deje v spodnej časti kontajnera a prekrývajúci sa text sa farebne odlišuje. Všimnete si to zrútenie po sebe nasledujúcich medzipriestorov v kóde.

 
 â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Dobrý deň¢Â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. 

 .textContainer width: 500px; výška: 320px;  

Po aplikácii white-space: teraz; pravidlo, obal textu sa mení takto:

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

pre hodnota Biely vesmír zachováva všetky medzery a zabraňuje zabaleniu textu:

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

pre-wrap hodnota Biely vesmír zachováva všetky medzery a obklopuje text:

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

Nakoniec pre-linka hodnota Biely vesmír zachová vertikálne biele miesta ako sú nové linky a obklopuje text:

 .TextContainer / * ... * / white-space: pre-line;  

Word prestávky

Ďalšou dôležitou vlastnosťou CSS, ktorú by ste mali vedieť, je ovládať textový zábal Slovo-break. Na všetkých vyššie uvedených snímkach obrazovky môžete vidieť prehliadač text pred slovom zabalený “Ahoj” na pravej strane, za ktorou text pretečený. Prehliadač slovo neporušilo.

Ak však vy musím dovoliť lámanie písmen v jednom slove takže text bude vyzerať aj na pravej strane, ktorú potrebujete použiť break-all hodnota pre Slovo-break vlastnosť:

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

Slovo-break Vlastnosť má okrem toho tretiu hodnotu break-all a normálne (patriace k predvolenému prerušeniu línie). keep-all hodnota neumožňuje porušenie slov.

Možno nebudete môcť vidieť účinok keep-all v angličtine. Ale v jazykoch, kde sú písmená v jednom slove zmysluplných jednotiek, môže prehliadač pri prebalení slová rozlúčiť a toto sa dá predísť používaním keep-all.

Napríklad listy v kórejských slovách, pôvodne rozbité na balenie, sú držané spolu keď white-space: keep-all; pravidlo je špecifikované.

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

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

Táto vlastnosť môže podporovať ďalšiu hodnotu nazvanú break-slovo v budúcnosti. Uvidíte ako break-slovo neskôr pracuje v “Prebaliť obal” časť tohto článku.

Príležitosti na prelomenie slov

Vývojári môžu tiež pridať príležitosti zabaliť do slov, pomocou Prvok HTML. Ak prehliadač potrebuje zabaliť textový reťazec, zváži miesto, kde je prítomný na balení.

 
 â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Hello â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. â ??  ?? Ahoj. 
 

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

bez , celá “Ahoj” slovo by bolo vykreslené v novom riadku. Pridaním k HTML kódu, sme informovali prehliadač, že je to v poriadku, aby ste v tomto bode prelomili slovo na balenie, v prípade potreby.

pomlčky

pomlčky Vlastnosť CSS je iný spôsob, ako kontrolovať prestávky medzi písmenami jedným slovom. Ak máte záujem, máme samostatný článok o pomenovaní v systéme CSS. Stručne povedané, vlastnosť umožňuje vytvoriť možnosti balenia pomocou pomenovania.

jeho auto hodnota výzvu prehliadača automaticky rozdeliť a zlomiť slová v prípade potreby pri balení. Manuálny hodnota si vyvolajú prehliadače zábal (ak je to potrebné) pri príležitosti rozdelenia, ktoré sme pridali, ako pomlčka (‐) alebo ­ (jemná pomlčka). ak nikto bola daná ako hodnota tam žiadne balenie nie je urobené v pomlčkách.

 
 modrý dom modrý modrý dom modrý modrý dom modrý dom modrý modrý dom modrý dom modrý modrý dom 
 

 .textContainer / * ... * / -webkit-pomlčky: auto; -ms-pomlčky: auto; pomlčky: auto;  

Prebaliť obal

overflow-wrap Vlastnosť CSS ovláda, ak a prehliadač môže zlomiť slová (alebo zachované priestory, ktorých podpora by sa mohla stať v blízkej budúcnosti) na pretečenie. Keď break-slovo hodnota je uvedená pre overflow-wrap, slovo bude porušená v prípade nie sú nájdené žiadne iné možnosti zábalu v riadku.

Poznač si to overflow-wrap je tiež známy ako word-wrap (sú to aliasy).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

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

Bez medzi písmenami vo vyššie uvedenom HTML kóde (tj bez možností balenia) nebol text najskôr zabalený a bola zachovaná ako jediné slovo.

Avšak, keď bolo vydané povolenie na zabalenie textu rozbitím slov (tzn break-slovo hodnota bola daná overflow-wrap), balenie sa stalo rozbitím celého reťazca kde to bolo potrebné.