Spojovníky - Triky CSS

Anonim

Táto hyphensvlastnosť riadi delenie textu v prvkoch na úrovni bloku. Môžete zabrániť tomu, aby sa delenie slov stalo vôbec, povoliť ho alebo povoliť iba vtedy, keď sú prítomné určité znaky.

Upozorňujeme, že tento hyphensjazyk je citlivý. Jeho schopnosť nájsť príležitosti na prerušenie závisí od jazyka, ktorý je definovaný v langatribúte nadradeného prvku. Nie všetky jazyky sú zatiaľ podporované a podpora závisí od konkrétneho prehľadávača.

Syntax

p ( hyphens: none | manual | auto )

pomlčky: žiadne

Slová nikdy nie sú rozdelené na zlom riadkov, aj keď znaky vo vnútri slova naznačujú, kam by mohlo alebo malo ísť.

pomlčky: manuálne

Slová sa zlomia iba za zlomom riadku, kde sa vo vnútri slova nachádzajú znaky, ktoré naznačujú príležitosti na zalomenie riadku. Príležitosť zalomenia riadka naznačujú dva znaky:

  • U+2010(HYPHEN): „tvrdý“ spojovník označuje viditeľnú príležitosť na zalomenie riadku. Aj keď čiara v danom okamihu nie je skutočne prerušená, spojovník sa vykreslí. Doslova „-“.
  • U+00AD(SHY): neviditeľný, „mäkký“ spojovník. Tento znak nie je vykreslený viditeľne; namiesto toho navrhuje miesto, kde sa prehliadač v prípade potreby môže rozhodnúť slovo porušiť. V HTML môžete použiť -na vloženie mäkkého spojovníka.

pomlčky: auto

Slová sa dajú deliť vo vhodných bodoch delenia slov buď podľa znakov delenia slov (pozri vyššie) vo vnútri slova, alebo ako automaticky určené jazykovým prostriedkom na delenie slov (ak to podporuje prehliadač alebo poskytuje @hyphenation-resource).

Podmienené znaky delenia slov vo vnútri slova, ak sú prítomné, majú pri určovaní bodov delenia vo vnútri slova prednosť pred automatickými prostriedkami.

pomlčky: všetky

Podpora ukončená, nepoužívajte . To bolo iba v špecifikácii dočasne na testovanie.

Ukážka

Nasledujúca ukážka obsahuje veľa odsekov a všetko je pripravené hyphens: auto;na demonštráciu koncepcie delenia slov. langAtribút je nastavený enna nadradený prvok.

Vyskúšajte toto pero!

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
88 6 * 10 * 12 * 5,1 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 4,2-4,3 *

Safari 5+ vyžaduje -webkit-, Firefox 6+ vyžaduje -moz-, IE 10+ vyžaduje -ms-, iOS 4.2+ vyžaduje -webkit-.

Prehliadače Chrome <55 a Android skutočne podporujú -webkit-hyphens: none, čo je predvolená hodnota, ale žiadna z ostatných hodnôt.

V prehliadačoch Firefox a Internet Explorer funguje automatické delenie slov iba pre niektoré jazyky (definované pomocou langatribútu). V tejto poznámke nájdete komplexný zoznam podporovaných jazykov.

Ak píšete webový dokument, ktorý skutočne potrebuje delenie slov, môžete použiť Hyphenator.js, čo je knižnica založená na rozsiahlom slovníku, ktorý do vášho obsahu automaticky vloží mäkké spojovníky a medzery s nulovou šírkou.

Bez JavaScriptu sa budete musieť spoliehať na oboje hyphensa word-wrap:

.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )