Pomlčky - Triky CSS

Anonim

Tyto hyphenskontroly vlastnictví dělení slov textu v blokových elementů. Můžete zabránit tomu, aby se dělení slov vůbec dělo, povolit jej nebo povolit pouze v případě, že jsou přítomny určité znaky.

Všimněte si, že hyphensje to citlivé na jazyk. Jeho schopnost najít příležitosti k přerušení závisí na jazyce definovaném v langatributu nadřazeného prvku. Ne všechny jazyky jsou zatím podporovány a podpora závisí na konkrétním prohlížeči.

Syntax

p ( hyphens: none | manual | auto )

pomlčky: žádné

Slova nejsou nikdy zalomena při zalomení řádku, i když znaky uvnitř slova naznačují, kam by mohlo nebo mělo být dělení slov.

pomlčky: manuální

Slova jsou zlomena pouze zalomením řádku, kde jsou uvnitř slova znaky, které naznačují příležitosti zalomení řádku. Existují dva znaky, které naznačují příležitost zalomení řádku:

  • U+2010(HYPHEN): „tvrdý“ spojovník označuje viditelnou příležitost zalomení řádku. I když čára není v daném okamžiku skutečně přerušena, spojovník se stále vykreslí. Doslova „-“.
  • U+00AD(SHY): neviditelná, „měkká“ pomlčka. Tento znak není vykreslen viditelně; místo toho navrhuje místo, kde by se prohlížeč v případě potřeby mohl rozhodnout slovo porušit. V HTML můžete použít -k vložení měkké pomlčky.

pomlčky: automaticky

Slova lze rozdělovat ve vhodných bodech dělení slov buď podle znaků dělení slov (viz výše) uvnitř slova, nebo podle automatického určení prostředku dělení slov (pokud je podporován prohlížečem nebo poskytován prostřednictvím @hyphenation-resource).

Podmíněné znaky dělení slov uvnitř slova, pokud jsou přítomny, mají při určování bodů dělení slov ve slově přednost před automatickými prostředky.

pomlčky: všechny

Zastaralé, nepoužívat . To bylo ve specifikaci pouze dočasně pro testování.

Ukázka

Demo níže obsahuje spoustu odstavců a vše je nastaveno tak, hyphens: auto;aby demonstrovalo koncept dělení slov. langAtribut je nastaven enna nadřazený prvek.

Podívejte se na toto pero!

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
88 6 * 10 * 12 * 5,1 *

Mobilní / 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-.

Chrome <55 a prohlížeč Android ve skutečnosti podporují -webkit-hyphens: none, což je výchozí hodnota, ale žádná z ostatních hodnot.

Ve Firefoxu a Internet Exploreru funguje automatické dělení slov pouze pro některé jazyky (definované pomocí langatributu). V této poznámce najdete komplexní seznam podporovaných jazyků.

Pokud píšete webový dokument, který opravdu potřebuje dělení slov, můžete použít Hyphenator.js, což je knihovna založená na rozsáhlém slovníku, který do vašeho obsahu automaticky vloží měkké pomlčky a mezery s nulovou šířkou.

Bez JavaScriptu se budete muset spolehnout na obojí hyphensa word-wrap:

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