Jak změnit výchozí textové obtékání pomocí HTML a CSS
Na rozdíl od papíru mohou webové stránky téměř nekonečně se rozprostírají bokem. Stejně jako působivé to není něco, co opravdu potřebujeme při čtení. Prohlížeče zabalí text v závislosti na šířka textového kontejneru a šířku obrazovky tak, abychom mohli vidět celý text, aniž bychom museli mnohokrát posouvat (pouze dolů).
Obal je to něco, co prohlížeče zvažují s ohledem na mnoho faktorů, jako je jazyk textu nebo umístění interpunkce a mezer netlačte jen dolů co se nevejde do pole definovaného pro obsah textu.
Jiné než balení, prohlížeče také starat se o prostory; sloučí více po sobě jdoucích mezer ve zdrojovém kódu do jednoho jediného místa na vykreslené stránce a registrují také nucené konce řádků před začátkem práce na obtékání.
Kdy změnit výchozí obtékání textu
To je vše skvělé a velmi si ceníme. Ale můžeme snadno skončit za okolností, kdy výchozí chování prohlížeče není to, co hledáme. Může to být titulek by neměl být zabalen nebo slovo v odstavci, které lépe rozdělit než sestupovat řádek, zanechání lichotivého prázdného místa na konci řádku.
Může se také stát, že jsme zoufale potřebují tyto prostory zachované v našem textu, prohlížeč je však stále spojuje do jednoho, což nás nutí přidat více ve zdrojovém kódu.
Předvolby pro obtékání mohou také změnit jazyk a účel textu. Mandarinský článek a francouzská báseň nemusí být nutně zabaleny přesně stejným způsobem.
Existuje poměrně mnoho vlastností CSS (a elementů HTML!), Které mohou kontrolovat obal a zarážky a také definovat, jak budou před obalem zpracovávány mezery a konce řádků.
Měkké možnosti zábalů a měkké přestávky
Prohlížeče rozhodnou, kam zabalit přetékající text podle hranic slov, pomlček, slabik, interpunkcí, mezer a více. Všechna tato místa jsou nazývána měkké příležitosti a když prohlížeč rozbije text na jednom takovém místě, zlom se nazývá měkké přetržení.
Nejjednodušší způsob vynutit další přestávku lze provést pomocí starého dobrého
Mezery
Pokud jste obeznámeni s bílý prostor Vlastnost CSS Vsadím se, že jste to přišli poprvé poznat stejným způsobem jako mnozí jiní; při hledání cesty zabrání zabalení textu. teď hodnota bílý prostor dělá přesně to.
Nicméně bílý prostor vlastnost je o více než pouhý obal. Co je to za prázdné místo? To je sada znaků vesmíru. Každý prostor v sadě se liší délku, směr nebo obojí.
Typické jednoduchý znak horizontálního prostoru je to, co přidáme stisknutím klávesy mezerníku. Klávesa Tab také přidává a podobný prostor, ale s větší délkou. Klávesa Enter přidává a vertikální prostor spustit nový řádek a v HTML přidává a jednoduchý nerozbitný prostor na webové stránky. Stejně jako v tomto případě existuje mnoho druhů prostor, které tvoří “mezery”.
Jak jsem zmínil na začátku, prohlížeče sbalit více mezer (horizontální i vertikální) ve zdroji do jednoho prostoru. Také tyto prostorové znaky považujte za příležitosti k balení (místa, kde lze text zabalit), když je potřeba obal.
A právě tyto akce prohlížeče můžeme ovládat bílý prostor. Všimněte si, že bílý prostor vlastnost neovlivňuje všechny druhy prostoru, jen ty nejčastější například pravidelné horizontální jednoduché místo, tabulátorový prostor a podávání řádků.
Níže můžete vidět snímek ukázkového textu zabalený prohlížečem, aby se vešel do kontejneru. Přetečení se odehrává v dolní části kontejneru a přetečený text je barevně odlišen. Všimnete si toho zhroucení následných prostorů v kódu.
A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj.
.textContainer width: 500px; výška: 320px;
Po aplikaci white-space: nowrap; V tomto případě se text textu mění následovně:
.textContainer / *… * / white-space: nowrap;
před hodnota bílý prostor zachovává všechny mezery a zabraňuje zabalení textu:
.textContainer / *… * / white-space: pre;
pre-wrap hodnota bílý prostor zachovává všechny mezery a Zahrnuje text:
.textContainer / *… * / white-space: pre-wrap;
Konečně pre-line hodnota bílý prostor zachovává vertikální mezery například nové řádky a Zahrnuje text:
.textContainer / *… * / white-space: pre-line;
Slovo přestávky
Další důležitou vlastností CSS, kterou byste měli vědět pro ovládání zábalu textu je slovo-break. Ve všech výše uvedených screenshotech můžete vidět prohlížeč text před slovo “Ahoj” na pravé straně, za kterým text přetékal. Prohlížeč neporušil slovo.
Nicméně, pokud jste muset umožňují rozbití písmen jedním slovem tak, aby text vypadal i na pravé straně, musíte použít break-all hodnotu pro slovo-break vlastnictví:
.textContainer / *… * / word-break: break-all;
slovo-break vlastnost má kromě hodnoty třetí hodnotu break-all a normální (patřící k výchozímu lámání řádků). Keep-all hodnota neumožňuje zlomení slov.
Možná nebudete schopni vidět efekt Keep-all v angličtině. Ale v jazycích, kde jsou písmena ve slově smysluplné jednotky, prohlížeč může při zabalení porušit slova, kterým lze zabránit Keep-all.
Například písmena v korejských slovech, původně rozbité pro balení, jsou drženy pohromadě když white-space: keep-all; pravidlo.
A¬Â ??¸AªA³Â ???¥A¼ Ã-Â-Â¥Ã- ?? à  ?? Â? Ã- ??  ??, ìÂ? AA? A?¬A½Â ????????¡A?? Ã-Â?  ??¬Â? Â-ìAA?¬Â ??¤. A¬Â Â? 10Ã- ?? A¬Â? AA? A?¬A½Â ??   ?? AªAµÂ-ìAA? Ã-Â?  ??¬AA?ªÂ °? 1997 ... «? 3ì ?? 10a¬Â ??¼Ã «Â¶Â? Ã- ??  ° 12ì ??¼AªA¹Â ??¬A§A?? à  ??  ... ì ??¼A¬Â ?? à «Â§Â ??¬Â ??¸A¬A¦Â ??¬Â-Â? ì ?? A¬Â-´à «Â¦A½Â?  ??????¤. A¬A§Â ??ªA¸A??    ±  ± ¡ÁÁÁÁÁ¬Â? Â-ìAA?¬Â ??¤. A¬Â ??´ Ã-Â?  ??¬AA?¬Â-Â? ìÁÁÁÁÁ?? A¬Â-Â… êA³A?? A¬Â   «Â °  ??¬Â ?? A¬Â  ??¬A¸AªÁÁÁÁÁ¤A¬Â ??´ Ã- ??¨Aª»AA? à «ÂªA¨A¬Â-¬   ??¤A¬AA?ªA³A¼ AªÂ °  ??¬Â ?? à «Â¶Â ??¬Â ??¼Ã «Â¥A¼   ??¤Ã  £ ¹Â?  ??????¤.
.textContainer / *… * / word-break: keep-all;
Tato vlastnost může podporovat jinou hodnotu nazvanou zlomové slovo v budoucnu. Uvidíte, jak zlomové slovo pracuje později, v “Přetečení” tohoto článku.
Příležitosti k přerušení slov
Vývojáři mohou také přidávejte do slov slova možnosti zabalení, za použití
A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Hello â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj. A¢Â ?? Ahoj.
.textContainer / *… * / white-space: pre-wrap;
Bez
Pomlčky
spojovníků Vlastnost CSS je jiný způsob, jak kontrolovat přestávky mezi písmeny ve slově. Pokud máte zájem, máme samostatný článek o dělení slov CSS. Stručně řečeno, nemovitost vám umožní Vytváření příležitostí k balení prostřednictvím dělení slov.
To je auto hodnota vyzve prohlížeč k v případě potřeby automaticky rozdělit a rozdělit slova při balení. manuál hodnota nutí prohlížeče na zabalit (pokud je to nutné) u příležitosti dělení slov, které jsme přidali, například znak pomlčky (‐) nebo (soft pomlčka). Li žádný byla dána jako hodnota žádné zabalení v blízkosti pomlček.
bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse
.textContainer / *… * / -webkit-pomlčky: auto; -ms-hyphens: auto; pomlčky: auto;
Přetečení
přetečení Vlastnost CSS řídí, zda a prohlížeč může přerušit slova (nebo dochované prostory, podpora, ke které by mohlo dojít v blízké budoucnosti) na přetečení. Když zlomové slovo hodnota přetečení, slovo bude přerušeno v případě žádné jiné měkké možnosti zabalení nejsou nalezeny v řádku.
Všimněte si, že přetečení je také znám jako zalamování (jsou to aliasy).
bluehousebluehousebluehluboklapnýhlubokýhlubokýhlubokýhlubocehlubokohlubocehlubokýhlubokýhlubokýhlubocehlubokohluboklubokýpodlaha \ t
.textContainer / *… * / overflow-wrap: break-word;
Mezi písmeny ve výše uvedeném HTML kódu (tj. Žádné možnosti obtékání) nebyly mezery mezi písmeny a textem vůbec zabaleny byl zachován jako jediné slovo.
Když však bylo uděleno povolení zabalit text porušením slov (tj zlomové slovo hodnota přetečení), olomení celého řetězce kdekoli to bylo nutné.
