Ako pridať zalomenie riadku pomocou vlastností CSS. Základné riešenia problému zalamovania slov v CSS

Zdravím všetkých a začnime. Povedzme, že máme nasledujúci text:

Vláda a administratíva Spojených arabských emirátov sústreďujú v tomto meste všetky najnovšie technológie založené na najnovších výdobytkoch vedy a techniky a snažia sa premeniť svoje mesto budúcnosti, ako keby zostúpilo z plátna nejakého sci-fi filmu. Medzi tieto technológie patria policajné roboty, robotické autá a dopravný systém Hyperloop a v blízkej budúcnosti začne v Dubaji fungovať aj automatická lietajúca taxislužba. A v rámci prípravy na túto udalosť uskutočnilo elektrické dvojmiestne lietadlo Volocopter s 18 rotormi, ktoré sa bude používať ako taxík, svoj prvý let v automatickom režime, píšu ...

tu máme nejaký text, s ktorým teraz začneme pracovať.

A prvá vlastnosť, ktorú budeme uvažovať, sa nazýva rozdeľovanie slov

zalomenie slov: normálne | zachovať všetky | break-all

Nás zaujímajú hlavne dve hodnoty tejto vlastnosti normal - predvolená hodnota a break-all, pri ktorých nastavujeme, že zalamovanie slov sa vykonáva znak po znaku. Pokiaľ ide o uchovávanie, táto hodnota sa používa na zalamovanie slov v čínštine, japončine a kórejčine.

P( zalomenie slov: prelomiť všetko;. )

všimnite si, že po použití tohto štýlu sa všetok náš text roztiahne na plnú dostupnú šírku a delenie slov sa nevykonáva slovami, ale znakmi. Táto vlastnosť môže byť užitočná, keď máme veľmi dlhé slovo, ktoré sa nezmestí do danej šírky. To však vytvára určitý druh nepohodlia, pretože úplne všetky slová sa prenášajú znak po znaku, dokonca aj tie, ktoré sa zmestia do danej šírky.

Našťastie existuje podobná vlastnosť, ktorá iba zalamuje nezhodné slová znak po znaku. Nazýva sa to overflow-wrap:

P( overflow-wrap: break-word; )

a po použití hodnoty break-word sa celý náš text zalomí slovo po slove a slová, ktoré sa nezmestia do zadanej šírky, sa zalomia znak po znaku. Dá sa povedať, že misia splnená! Okrem hodnoty zlomového slova táto vlastnosť akceptuje:

prepadový obal: normálny | zlomiť slovo | dediť;

Teraz prejdime k pokročilejšej vlastnosti css na zalamovanie slov v texte.

Zvážte vlastnosť white-space, pomocou ktorej môžeme napodobniť činnosť pred tagu bez toho, aby sme zmenili samotný text na monospace.

biele miesto: normálne | nowrap | pred | predlinka | predbalenie | dediť

V skutočnosti pomocou tejto vlastnosti pracujeme len s medzerami v texte. Napríklad, ak na náš text použijeme nasledujúci štýl:

Medzera: nowrap;

všetky zalomenia riadkov budú ignorované a náš text sa zobrazí ako jeden riadok.

Medzera: pre;

V prípade hodnoty pre budú všetky zalomenia riadkov rovnaké ako zalomenia riadkov v zdrojovom kóde. Navyše, ak sa text nezmestí do zadanej šírky, neprenesie sa. Ak chceme, aby sa zalomil, musíme zadať predriadkovú hodnotu.

Ak chceme brať do úvahy nielen zalomenia riadkov v zdrojovom kóde, ale aj medzery medzi slovami, musíme špecifikovať:

White-space: pre-wrap;

To je v podstate všetko, čo som vám chcel povedať o zalamovaní slov pomocou css. Dúfam, že tento článok bol pre vás užitočný a získané poznatky využijete viackrát.

No ja sa s tebou lúčim. Prajem vám úspech a veľa šťastia! Zbohom!

Ťažko znášajú nielen ľudí, ale aj slová. Napríklad chemická zlúčenina je veľmi podobná niektorým ľuďom s „ obrátený"! Nevieme, ako sa vysporiadať s takými ťažkými osobnosťami, ale CSS určite pomôže so zalamovaním slov:

Prečo znášať „neznesiteľné“

Vo väčšine prípadov, keď sa textový obsah na webových stránkach zobrazuje v prehliadači, zalamovanie slov sa nepoužije. Ak sa slovo úplne nezmestí do oblasti obrazovky, potom je predvolene úplne " sa pohybuje' na ďalší riadok.

Čiastočné delenie slov sa vzťahuje iba na dlhé a zložité slová pozostávajúce z niekoľkých výrazov a oddelené spojovníkom. Tu vznikajú problémy so zobrazovaním týchto slov na rôznych uhlopriečkach obrazoviek a v rôznych prehliadačoch. Zároveň presne predpovedajte, ako dlho bude slovo " vyzerať ako» je ťažké na strane klienta, preto špecifikujte pomlčky « manuálne» nezmyselné:

Vyriešte problém zalamovania slov pomocou HTML

Predtým, ako sa pozrieme na zalamovanie dlhých slov v CSS, pozrime sa na spôsoby, ako tento problém vyriešiť pomocou jazyka hypertextu.
V HTML je na to niekoľko možností:

• Použitie znaku mäkkého prerušenia -- umožňuje nastaviť bod zlomu zloženého slova. Keď sa zmení veľkosť okna prehliadača, iba časť dlhého slova za ­ sa zalomí na ďalší riadok a po prvej polovici sa zobrazí spojovník podobný pomlčke:

Príklad komplexnej chemickej zlúčeniny a textu - kyselina metylpropenyléndihydroxycinnamemenylakrylová

• Pomocou značky - prvok bol zavedený v HTML 5. Slúži tiež na to, aby prehliadaču povedal, kde má zlomiť zložené alebo dlhé slovo. Ale na rozdiel od predchádzajúceho špeciálneho znaku sa táto značka nezobrazuje na mieste " chyba» pomlčka, ktorá môže nepriaznivo ovplyvniť čitateľnosť celého textu:

metylpropenylén dihydroxycinna kyselina menakrylová

Podpora značiek v niektorých prehliadačoch implementované nesprávne. Bude v nich fungovať, ak je preň v kóde CSS napísaná vlastnosť display s hodnotou inline-block.

Zalamovanie slov pomocou CSS

Pred vypnutím zalamovania slov v CSS sa pozrime na niekoľko vlastností, ktoré môžu vyriešiť hlavný problém:

1. word-wrap – opisuje, ako zalamovať slová, ktoré sa nezmestia do zadaných rozmerov kontajnera. Okamžite stojí za to varovať, že s validáciou tejto vlastnosti sú problémy a konzorcium W3C ešte nerozhodlo o implementácii jej podpory v CSS. Preto špecializované validátory v prítomnosti zalamovania slov v kóde vygenerujú chybu:

Túto vlastnosť však „akceptujú“ všetky moderné prehliadače a je efektívnym riešením problému zalamovania dlhých slov. word-wrap má nasledujúce hodnoty:

• normálne - slová nie sú zabalené;
• break-word - automatické zalamovanie slov;
• zdediť - zdediť hodnotu rodiča.

Príklad ilustrujúci použitie tejto vlastnosti:

V novej špecifikácii CSS bola vlastnosť word-wrap premenovaná na overflow-wrap . Obe vlastnosti nadobúdajú rovnaké hodnoty. Ale podpora pre overflow-wrap je stále zle implementovaná, takže je lepšie použiť starú verziu vlastnosti:

Ako môžete vidieť na obrázku vyššie, nová vlastnosť je podporovaná prehliadačom Google Chrome, ale nie IE. Preto by sa na zalamovanie slov v CSS nemalo používať overflow-wrap.

1. word-break - nastavuje pravidlá pre obaľovanie riadkov vo vnútri kontajnera, ak sa do neho nezmestia na šírku. Toto je nová vlastnosť a do CSS3 bola pridaná podpora. Je platný, ale je určený na prácu s reťazcami, takže zalamovanie slov môže byť gramaticky nesprávne.

Vlastnosť nadobúda tri hodnoty:

• normálne - použijú sa predvolené pravidlá prenosu;
• zalomenie slov – zalamovanie riadkov sa vykonáva automaticky tak, aby sa slovo zmestilo do rozmerov kontajnera stanovených šírkou;
• keep-all – Zakáže automatické delenie slov v čínštine, japončine a kórejčine. Pre ostatné jazyky je účinok hodnoty podobný normálnemu.

1. hyphens je nová vlastnosť predstavená s vydaním CSS3. Nastavuje, ako bude prehliadač zalamovať slová vo výstupnom texte. Nehnuteľnosť nadobúda niekoľko hodnôt:

• none - zakáže zalamovanie slov v CSS;
• Manuálny ( predvolená hodnota) - slová sú zabalené v tých častiach textového bloku, kde je to špecifikované pomocou značky alebo mäkký zábal (-) ;
• auto – Prehliadač automaticky zalamuje slová na základe svojich nastavení.

Pre správne fungovanie vlastnosti v tagu alebo

Atribút lang musí obsahovať hodnotu "ru" (lang="ru").

Táto vlastnosť je podporovaná najnovšími verziami IE, Opera a Firefox. Každý z nich má svoj vlastný rad CSS. Prehliadač Google Chrome nepodporuje spojovníky. Príklad:

Zákaz zalamovania slov

Niekedy sa musíte uistiť, že riadok je zobrazený úplne bez prestávky. Zákaz zalamovania slov v css možno implementovať niekoľkými spôsobmi:

• S nerozdeliteľnou medzerou   , ktorá je nastavená na zalomenia riadkov alebo slov;
• Nastavením vlastnosti Biely vesmír význam" nowrap» ( white-space: nowrap ).

Príklad implementácie:

Teraz môžete zabaliť aj tie najdlhšie slová pomocou CSS. S problémom neznesiteľných ľudí sa však budete musieť vysporiadať sami. Skúste ich ovplyvniť metódami CSS

Často je potrebné pridať nový odsek, ale bez prázdneho riadku, ktorý vkladá značka odseku

Pre niektoré časti textu sú štandardné intervaly prijaté pre odseky jednoducho nevhodné. Môžu to byť nápisy pod obrázkami a v tabuľkách, básne, citáty, poznámky pod čiarou a poznámky.

Pre vynútené zalamovanie riadkov je k dispozícii špeciálna značka, ktorej funkcia je vložená do názvu br (prelomiť riadok - "prelomiť riadok, riadok"). Tag
html hypertextový značkovací jazyk znamená, že všetok nasledujúci obsah musí začínať na novom riadku. V prípade potreby môžete umiestniť niekoľko štítkov za sebou, aby ste dosiahli požadovaný rozstup.

Tag
nerozlišuje veľké a malé písmená a nevyžaduje uzatváraciu značku, pretože je to prázdny prvok, ale je lepšie si zvyknúť na zatváranie všetkých značiek. V XHTML musí byť značka prerušenia "pevne uzavretá" so spätnou lomkou.

Príklad značky prerušenia