Zarovnanie textu - Triky CSS

Anonim

text-justifyNehnuteľnosť v CSS je spoločník k text-alignmajetku, ktorý slúži na nastavenie spôsobu zarovnanie textu, ak text-alignje nastavená na justifyhodnotu.

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

Hodnoty

  • inter-word: Určuje, že text je odôvodnený úpravou medzery medzi slovami, čo efektívne vytvorí ďalšie medzery medzi slovami. Toto je v skutočnosti variácia word-spacingnehnuteľnosti.
  • inter-character: Určuje, že text bude spravodlivý úpravou medzery medzi znakmi a účinným spôsobom tak vytvorí ďalšie medzery medzi znakmi. Toto je v skutočnosti variácia letter-spacingnehnuteľnosti.
  • auto: Umožňuje prehliadaču určiť, či je s odôvodnením lepšie zaobchádzané ako inter-wordalebo inter-character. To môže byť užitočné vo viacjazyčných scenároch, kde je jazyk obsahu neznámy až do jeho vykreslenia, čo umožňuje užívateľskému agentovi prehľadávača zvoliť zodpovedajúcim spôsobom podľa toho, ktorá metóda lepšie zapadá do jazykového kontextu.
  • none: Zakáže metódy zarovnania, efektívne odstráni všetky príležitosti na zarovnanie alebo prepíše miesto, kde sa v kaskáde môže vyskytnúť metóda zarovnania.

Čo je to vlastne odôvodnenie?

Zarovnaný text je fantazijný spôsob, ako povedať, ako text vypĺňa políčko, ktoré ho obsahuje. V skutočnosti už možno dobre poznáte zarovnávací text a ani o tom neviete. Ak ste niekedy používali softvér na úpravu textu, ako napríklad Word a Dokumenty Google, potom vám môžu byť známe tieto ikony:

Možnosti zarovnania textu a zarovnania na paneli nástrojov Dokumenty Google

Prvé tri nastavujú zarovnanie textu rovnako ako vlastnosť CSS text-align, kde je možné text zarovnať doľava, doprava alebo úplne na stred.

Táto štvrtá ikona je možnosťou zarovnania a hovorí obsahu, aby vyplnil celú šírku dokumentu tak, aby bol každý riadok zarovnaný priamo k okraju, bez ohľadu na to, či ovplyvňuje medzery medzi slovami.

Zarovnanie obsahu v Dokumentoch Google pridá medzery medzi slovami tak, aby zaberali celú šírku dokumentu v každom riadku

text-justifyVlastnosť nám umožňuje, aby urobili to isté, ale s dodatočnou flexibilitu pre určenie, či je rozstup metóda používaná na ospravedlnenie obsah je riadený medzi slová alebo znaky.

Podpora prehľadávača

text-justifyVlastnosť je zahrnutá v CSS Text Module úrovni špecifikácie 3, ktorý je v súčasnej dobe v stave návrhu editore v čase písania tohto článku.

V období odporúčaní kandidátov je táto nehnuteľnosť v súčasnosti označená ako „vystavená riziku“ spadnutia. Preto sa neodporúča používať túto vlastnosť vo výrobe, pretože je nepravdepodobné, že bude v blízkej budúcnosti prijatá ako štandard vo všetkých prehliadačoch.

Aktuálna podpora je obmedzená na Firefox 55+. Internet Explorer 11 a Edge 14+ tiež podporujú túto vlastnosť, ale iba inter-wordhodnota a neoficiálne hodnoty, ktoré nie sú zahrnuté v špecifikácii W3C.

Ú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
Nie 55 11 18 Nie

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
Nie 85 Nie Nie