Zarovnání textu - Triky CSS

Anonim

text-justifyNemovitost v CSS je společník k text-alignmajetku, který slouží k nastavení způsobu zarovnání textu, pokud text-alignje nastavena na justifyhodnotu.

p ( text-align: justify; text-justify: inter-word; )

Hodnoty

  • inter-word: Určuje, že text je zarovnán úpravou mezer mezi slovy, čímž se efektivně vytvoří další mezery mezi slovy. Jedná se skutečně o variantu word-spacingvlastnosti.
  • inter-character: Určuje, že text bude správně upraven úpravou mezer mezi znaky, čímž se efektivně vytvoří další mezery mezi znaky. Jedná se skutečně o variantu letter-spacingvlastnosti.
  • auto: Umožňuje prohlížeči určit, zda je s odůvodněním lépe zacházeno jako inter-wordnebo inter-character. To může být užitečné ve vícejazyčných scénářích, kdy je jazyk obsahu neznámý, dokud není vykreslen, což umožňuje uživatelskému agentu prohlížeče zvolit odpovídajícím způsobem na základě toho, která metoda lépe odpovídá jazykovému kontextu.
  • none: Zakáže metody ospravedlnění, účinně odstraní všechny příležitosti k ospravedlnění nebo přepíše, kde může v kaskádě dojít k metodě ospravedlnění.

Co přesně je odůvodnění?

Zarovnaný text je efektní způsob, jak říci, jak text vyplňuje pole, které jej obsahuje. Ve skutečnosti už možná dobře znáte text zarovnávání a ani o něm nevíte. Pokud jste někdy používali software pro úpravy textu, jako je Word a Dokumenty Google, můžete znát tyto ikony:

Možnosti zarovnání a zarovnání textu na panelu nástrojů Dokumenty Google

Tito první tři nastavují zarovnání textu, stejně jako vlastnost CSS text-align, kde lze text zarovnat doleva, doprava nebo zcela na střed.

Tato čtvrtá ikona je možností zarovnání a říká obsahu, aby vyplnil celou šířku dokumentu tak, aby každý řádek byl zarovnaný až k okraji, bez ohledu na to, zda ovlivňuje mezery mezi slovy.

Zarovnání obsahu v Dokumentech Google přidává mezery mezi slovy tak, aby zabíraly celou šířku dokumentu na každém řádku

text-justifyVlastnost nám umožňuje, aby učinily totéž, ale s dodatečnou flexibilitu pro určení, zda je rozteč metoda používaná k ospravedlnění obsah je řízen mezi slova nebo znaky.

Podpora prohlížeče

Tato text-justifyvlastnost je zahrnuta ve specifikaci CSS Textový modul úrovně 3, která je v době psaní tohoto dokumentu aktuálně ve stavu konceptu editora.

Tato vlastnost je aktuálně uvedena jako „ohrožená“ propadnutím v období doporučení kandidáta. Z tohoto důvodu se nedoporučuje používat tuto vlastnost ve výrobě, protože je nepravděpodobné, že bude v blízké budoucnosti přijata jako standard ve všech prohlížečích.

Aktuální podpora je omezena na Firefox 55+. Internet Explorer 11 a Edge 14+ také tuto vlastnost podporují, ale pouze inter-wordhodnota a neoficiální hodnoty, které nejsou zahrnuty ve specifikaci W3C.

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
Ne 55 11 18 Ne

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
Ne 85 Ne Ne