• Jaké hodnoty může mít vlastnost zarovnání textu. Zdobení textu pomocí CSS. Zarovnání posledního řádku: vlastnost text-align-last

    css internet Explorer Chrome Opera safari Firefox Android iOS
    2.1 6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
    3 2.0+ 11.6+ 3.1+ 3.6+ 2.1+ 2.0+

    stručné informace

    CSS verze

    Hodnoty

    na střed Zarovná text na střed. Text je umístěn vodorovně v okně prohlížeče nebo kontejneru, kde je umístěn textový blok. Řádky textu se zdají být navlečeny na neviditelné ose, která prochází středem webové stránky. Podobná metoda zarovnání se aktivně používá v nadpisech a různých titulcích, jako jsou titulky, dává oficiální a pevný vzhled návrhu textu. Ve všech ostatních případech se zarovnání na střed používá zřídka z toho důvodu, že je nepohodlné číst velké množství takového textu. justify Justify, což znamená zarovnání doleva a doprava zároveň. K provedení této akce prohlížeč v tomto případě přidá mezi slova mezery. vlevo Zarovná text doleva. V tomto případě jsou řádky textu zarovnány doleva a pravý okraj je umístěn v "žebříčku". Tato metoda zarovnání je na webových stránkách nejoblíbenější, protože umožňuje uživateli snadno hledat nový řádek a pohodlně číst velký text. vpravo Zarovná text doprava. Tato metoda zarovnání působí jako antagonista předchozího typu. Řádky textu jsou totiž zarovnány doprava, zatímco levá zůstává „roztrhaná“. Vzhledem k tomu, že není zarovnán levý okraj, tedy od kterého se čtou nové řádky, je takový text obtížnější číst, než kdyby byl zarovnán doleva. Proto se zarovnání vpravo obvykle používá pro krátké nadpisy, které nemají více než tři řádky. Neuvažujeme o konkrétních stránkách, kde se musí text číst zprava doleva, kde se podobná metoda zarovnání může hodit. auto Nezmění polohu prvku. inherit Zdědí hodnotu rodiče. start Stejné jako doleva, pokud se text pohybuje zleva doprava, a doprava, pokud se text pohybuje zprava doleva. end Stejné jako vpravo, pokud jde text zleva doprava a doleva, když text jde zprava doleva.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    zarovnání textu

    Zarovnání vlevo
    Zarovnání na střed

    Výsledek tohoto příkladu je znázorněn na Obr. 1.

    Rýže. 1. Zarovnání textu v prohlížeči Safari

    Internet Explorer do verze 7.0 včetně interpretuje tento příklad poněkud odlišně než ostatní prohlížeče, zarovnává nejen text, ale i bloky (obr. 2).

    Rýže. 2. Zarovnání textu v aplikaci Internet Explorer 7

    Objektový model

    document.getElementById("elementID ").style.textAlign

    Prohlížeče

    IE až do verze 7.0 včetně zarovnává nejen obsah prvku bloku, ale prvek samotný.

    Vlastnost CSS text-align řídí vodorovné zarovnání textu, stejně jako obrázků a dalších prvků. Nemovitost má 4 možné možnosti zarovnání.

    Syntaxe CSS zarovnání textu

    ...zarovnání textu : centrum | ospravedlnit | vlevo | vpravo | zdědit; ...
    • střed - zarovnání na střed oblasti (například šířka oblasti je 500 pixelů, takže bude zarovnání podél linie 250 pixelů)
    • zarovnat - roztáhne text tak, aby se vešel na celou šířku oblasti
    • zarovnání vlevo - vlevo
    • zarovnání vpravo - vpravo
    • zdědit - přijmout hodnotu předka (rodiče)

    Nejčastěji se tyto vlastnosti používají v blocích.

    a odstavce

    Poznámka:
    K dispozici je také vlastnost vertical-align, která řídí vertikální zarovnání.

    jak zarovnat text v html

    Příklad #1.

    Zarovnejte text doleva. Ve výchozím nastavení aktivní.

    Выравнивание текста по левому краю

    Выравнивание текста по левому краю

    Пример №2. Выравнивание текста и картинки по центру

    Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

    Выравнивание текста по центру

    На странице преобразуется в следующее

    Выравнивание текста по левому краю

    Пример №3. Выравнивание текста по правому краю

    Выравнивание текста по правому краю.

    Выравнивание текста по правому краю

    На странице преобразуется в следующее

    Выравнивание текста по правому краю

    Пример №4. Выравнивание текста по ширине всей области

    Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

    На странице преобразуется в следующее

    Выравнивание текста по ширине всей области

    Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

    Примечание

    Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

    Выравнивание по центру

    Выравнивание текста по ширине всей области

    ... ...

    Разница в тегах

    и

    В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

    Задаёт выравнивание последней строки блока текста.

    Краткая информация

    Обозначения

    Описание Пример
    <тип> Указывает тип значения. <размер>
    A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [,<время>]*
    + Повторять один или больше раз. <число>+
    ? Указанный тип, слово или группа не является обязательным. inset?
    {A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
    # Повторять один или больше раз через запятую. <время>#
    ×

    Значения

    auto Совпадает с выравниванием, заданным свойством text-align , за исключением значения justify . Для него выравнивание будет как start . start Строка выравнивается по начальному краю блока, который может меняться в зависимости от направления текста (слева направо или справа налево). end Строка выравнивается по конечному краю блока, он определяется направлением текста. left Строка выравнивается по левому краю. right Строка выравнивается по правому краю. center Строка выравнивается по центру. justify Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

    Влияние разных значений на положение текста показано в табл. 1.

    Табл. 1. Влияние значений text-align-last
    Значение Выравнивание Вид текста
    left По левому краю
    right По правому краю
    center По центру
    justify По ширине

    Песочница

    Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

    div { text-align-last: start ; }

    Пример

    text-align-last

    Při přechodu hor se opřete o údolí; zůstaň na výšinách a dívej se, kde je slunečná strana. Když bojujete s nepřítelem na vyvýšeném místě, nechoďte přímo nahoru. Takové je rozestavení vojsk v horách.

    Objektový model

    Objekt.style.textAlignLast

    Poznámka

    Internet Explorer a Edge nepodporují počáteční a koncové hodnoty.

    Firefox starší než verze 49 podporuje vlastnost -moz-text-align-last.

    Specifikace

    Každá specifikace prochází několika fázemi schvalování.

    • Doporučení (Recommendation) - specifikace je schválena W3C a doporučena jako standard.
    • Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale k implementaci standardu je nutná podpora vývojářské komunity.
    • Navrhované doporučení ( Doporučené doporučení) - v této fázi je dokument předložen Poradnímu výboru W3C ke konečnému schválení.
    • Pracovní návrh – Vyzrálejší návrh po diskuzi a dodatcích pro komunitní recenzi.
    • Předloha editora ( Redakční návrh) je návrhová verze normy po úpravách provedených editory projektu.
    • návrh ( Návrh specifikace) je první verze návrhu normy.
    ×

    Tvůrce webu obvykle rozhoduje, která písmena budou velká a která malá, na základě pravidel pravopisu a svých vlastních preferencí. Proces změny velikosti písmen lze však pomocí vlastnosti automatizovat textová transformace. Tato vlastnost může nabývat čtyř hodnot:

    • žádný - text je psán beze změn;
    • kapitalizovat- každé slovo bude začínat velkým písmenem;
    • malá písmena - všechny znaky se stanou malými (malými);
    • velká písmena- všechny znaky se stanou velkými (velká písmena).

    Například následující pravidlo určuje, že nadpis H1 by měl být velkými písmeny:

    H1 (transformace textu: velká písmena;)

    Je vhodné nastavit automatickou změnu velikosti písmen pro zkratky, názvy prvků, nadpisy a další. textové prvky, kde chcete psát velkými nebo malými písmeny.

    Dekorace textu: vlastnost text-decoration

    Vlastnictví text-dekorace umožňuje nastavit dodatečný design textu. Hodnoty této vlastnosti jsou konstanty žádný, podtržení, přetržení, přeskočení A blikat, která vám umožní zobrazit normální text, nakreslit čáru nad, pod nebo přes text nebo nechat text blikat. Příklad použití různých hodnot této vlastnosti je na obrázku 11.4.


    Rýže. 11.4.

    Nejčastější aplikace nemovitosti text-dekorace je změnit výchozí podtržení odkazu. Například následující pravidlo určuje, že odkazy by měly být podtržené:

    A:link (text-decoration: underline;)

    Word spacing: vlastnost word-spacing

    Chcete-li nastavit mezery mezi slovy v textu, použijte vlastnost word-spacing. Hodnoty této vlastnosti lze nastavit pomocí klíčového slova normal, které je výchozí a nastavuje standardní mezery pro aktuální písmo. Chcete-li nastavit interval, kromě standardního, můžete zadat hodnotu v libovolných dostupných jednotkách CSS a hodnota může být záporná.

    Následující pravidlo tedy zvětšuje mezery mezi slovy v záhlaví H1 o 1 em:

    H1 (mezera slov: 1 em;)

    Zarovnání textu: vlastnost zarovnání textu

    Zarovnání označuje umístění levého nebo pravého okraje bloku textu podél neviditelné svislé čáry. Vlastnost text-align se používá k zarovnání textu. Platné hodnoty pro tuto vlastnost jsou left, right, center a justify , které určují zarovnání doleva, doprava, na střed a zarovnání do bloku.

    Následující pravidlo nastavuje zarovnání na střed všech prvků obsažených v prvku DIV:

    DIV (zarovnání textu: na střed;)

    Proklad: vlastnost line-height

    Proklad je vzdálenost mezi základními liniemi těsně rozmístěných čar. Za normálních okolností závisí řádkování na typu a velikosti písma a je automaticky určeno prohlížečem. Tuto hodnotu však lze změnit pomocí vlastnosti line-height. Výchozí hodnota normální způsobí, že prohlížeč automaticky vypočítá řádkování. Jakékoli číslo větší než nula se považuje za násobitel velikosti písma aktuálního textu. Jako hodnoty pro tuto vlastnost je také možné použít libovolné jednotky délky akceptované v CSS. Je také povoleno používat procentuální zápis, v takovém případě se výška písma bere jako 100 %. Záporné řádkování není povoleno.

    Letter spacing: vlastnost letter-spacing

    Prohlížeč automaticky vybírá mezery mezi znaky na základě velikosti a typu písma. V některých případech je nutné opravit mezery mezi písmeny. Vlastnost letter-spacing se používá k řízení mezer mezi písmeny. Jako hodnoty pro tuto vlastnost lze použít libovolné jednotky délky CSS, ale doporučuje se používat relativní jednotky založené na velikosti písma (em a ex). Na rozdíl od řádkování povoluje vlastnost letter-spacing zápornou hodnotu, ale v tomto případě se musíte ujistit, že je zachována čitelnost textu.

    Následující pravidlo zvyšuje mezery mezi znaky v záhlaví H1 o 0,5 em .

    vlastnost text-align-last ( nezaměňovat s HTML align) určuje, jak bude zarovnán poslední řádek bloku nebo řádek před vynuceným přerušením. To je důležité, protože poslední řádek odstavce obvykle neobsahuje dostatek textu, aby zaplnil celý prostor.

    V tomto článku se budeme zabývat všemi aspekty vlastnosti text-align-last, včetně akceptovaných hodnot a podpory prohlížeče.

    Použití a přijaté hodnoty

    Použití vlastnosti text-align-last je jednoduché. Zde je fragment kódu pro zarovnání posledního řádku textu doprava:

    Úvodní graf ( text-align: justify; // Povinné pro IE a Edge text-align-last: right; )

    Vlastnost může nabývat sedmi hodnot. Pravděpodobně znáte standardní textové hodnoty HTML align:left , right a center . Zarovnávají text na posledním řádku vpravo, vlevo a na střed kontejneru.

    Níže uvedený příklad ilustruje rozdíly mezi těmito třemi hodnotami:

    Zobrazit příklad

    Čtvrtá hodnota, justify , zarovná poslední řádek tak, aby byl text rovnoměrně rozmístěn po celé šířce kontejneru. Toho je dosaženo přidáním vhodného počtu mezer mezi slova. V závislosti na množství textu lze tuto vlastnost použít k úplnému vyplnění prostoru na posledním řádku, aniž by mezi slovy vznikaly příliš velké mezery.

    Text ve druhém odstavci je také rozložen, ale protože poslední řádek obsahuje pouze jedno slovo, je umístěn vlevo.

    Zobrazit příklad

    Zarovnání posledního řádku textu doleva je vhodné pro jazyky, které se čtou zleva doprava ( LTR), ale to by bylo špatné pro jazyky RTL. V takových případech může použití hodnot vlevo nebo vpravo způsobit problémy.

    Naštěstí můžete použít počáteční hodnotu k zarovnání textu k okraji, kde začíná psaní a čtení. To znamená, že nastavením vlastnosti text-align-last na start zarovnáte text doleva pro jazyky LTR a doprava pro jazyky RTL.

    Koncovou hodnotu můžete také použít k zarovnání textu na protější okraj, než kde začíná psaní a čtení. To se bude shodovat vpravo pro jazyky LTR a vlevo pro jazyky RTL.

    Zobrazit příklad

    Výchozí hodnota pro tuto vlastnost je auto . Při použití je text na posledním řádku zarovnán podle hodnoty vlastnosti HTML text align, pokud není nastavena na zarovnání . Jinak je text zarovnán na šířku kontejneru pouze v případě, že je vlastnost text-justify nastavena na distribute . Jinak je text zarovnán k okraji, kde začíná psaní a čtení.

    Důležité poznámky

    Aby text-align-last fungoval, musí být vlastnost text-align nastavena na justify . Toto pravidlo je však implementováno pouze v IE a Edge. Ve Firefoxu a Chrome tato vlastnost funguje bez nastavení zarovnání textu na zarovnání . V níže uvedeném příkladu by měl být text v Edge a IE zarovnán doprava. V jiných prohlížečích budou poslední řádky odstavců zarovnány podle hodnoty vlastnosti text-align-last a zbytek řádků bude zarovnán doprava.

    Zobrazit demo

    Pokud nenastavíme zarovnání textu na zarovnání HTML , nebude výsledek vypadat tak atraktivně. S největší pravděpodobností tedy nastavíte rozložení šířky textu.

    Tato vlastnost funguje, i když má odstavec vynucený konec řádku zadaný pomocí značky
    nebo něco takového. Mějte na paměti, že tato vlastnost ovlivní všechny poslední řádky textu v zadaném prvku, nejen ten nejvzdálenější. Pokud například text uvnitř článku nebo prvku div obsahuje tři odstavce, bude poslední řádek v každém odstavci zarovnán podle hodnoty vlastnosti text-align-last nastavené na celém nadřazeném prvku.

    Pokud chcete zarovnat pouze úplně poslední řádek obsahu, můžete použít selektory :last-child nebo :last-of-type. Vezměte si kód z ukázky níže jako příklad:

    článek ( text-align: justify; ) article p:last-of-type ( text-align-last: right; )

    Poslední řádek posledního odstavce našeho článku zarovnává doprava. Zbývající řádky jsou zarovnány na základě hodnoty vlastnosti HTML text align.

    Zobrazit demo

    Pro změnu zarovnání můžete použít i další selektory: :sudý a :lichý.

    Někdy může mít odstavec pouze jeden řádek. V tomto případě, pokud jste zadali hodnoty jak pro vlastnost text-align, tak pro vlastnost text-align-last, bude mít přednost druhá vlastnost.

    Zvažte následující fragment kódu:

    p ( text-align: justify; ) p:nth-of-type(2) (text-align-last: left; )

    Pokud má druhý odstavec pouze jeden řádek, bude text zarovnán doleva, protože text-align-last bude mít přednost. Níže uvedená ukázka ukazuje tento CSS v akci, stejně jako několik dalších příkladů zarovnání HTML.

    Zobrazit demo

    Podpora prohlížeče

    Podporu pro tuto vlastnost lze povolit pomocí " Povolit funkce experimentální webové platformy” v Google Chrome a Opera počínaje verzemi 35 a 22. Je plně podporován v prohlížečích Chrome 47+ a Opera 34+.

    Chcete-li použít tuto vlastnost ve Firefoxu, musíte přidat předponu -moz-. Počáteční a koncové hodnoty nejsou podporovány IE. Edge přitom tuto vlastnost plně podporuje. Jediný populární prohlížeč, který plně nepodporuje text-align-last, je Safari .

    Přečtěte si více: