Свойство text-align

CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжаем изучать основы стилевой разметки CSS и у нас на очереди свойства text-decoration, vertical-align, text-align, text-indent и ряд других, которые помогают оформлять внешний вид текстов в Html коде.

В прошлой статье мы рассмотрели свойства font-family, font-weight, font-size и font-style в CSS коде, которые предназначаются для настройки внешнего вида шрифтов при современной блочной верстке сайтов.

Ну, а еще раньше мы во всех подробностях рассмотрели все типы селекторов в CSS, узнали как их можно группировать и какие приоритеты расставляет браузер при их интерпретации. Правда, все это было разбито на несколько статей, поэтому чтобы не запутаться я советую изучать материалы в том порядке, как это приведено в справочнике.

Text-decoration, text-align, text-indent в CSS

Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался в чистом Html 4.01 по версии валидатора для выравнивания содержимого, например, абзацев P или заголовков).

Он имеет всего четыре возможных значения:

Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.

Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.

Обратите внимание

Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:

text-align:justify;

По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.

Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя размеры (пиксели, em или ex) допустимые в CSS) или с помощью процентов:

От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.

А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:

text-indent:-1em;

Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов, т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).

Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).

Оно может иметь всего четыре значения:

Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, гиперссылки (тег A) (они по умолчанию подчеркиваются).

Важно

Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что…).

Если текст гиперссылки нужно будет сделать неподчеркнутым (например, в меню), то используйте для text decoration элемента гиперссылки значение none.

Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):

text-decoration:underline overline line-through;

Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел.

Vertical-align — вертикальное выравнивание

Дальше у нас идет вертикальное выравнивание — vertical-align. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Правда, для тегов таблицы Td и Th это означает немного другое — выравниваться по вертикали будет весь контент, который находится в этих ячейках.

Для Css правила vertical-align можно использовать следующие значения:

Строки по умолчанию выравниваются по базовой линии. Вот смотрите, я применил к этому фрагменту текста увеличение шрифта и эти два фрагмента выровнялись по базовой (нижней) линии. А вертикальное выравнивание с помощью vertical-align как раз и предназначено именно для изменения способа выравнивания строк.

Например, если я для того же увеличенного фрагмента текста пропишу vertical-align:baseline, то никаких изменений не произойдет, т.к. значение baseline используется для этого Css правила по умолчанию.

Кстати, в качестве значений для него можно использовать и числа, а надпись vertical-align:0 будет означать тоже самое, что и vertical-align:baseline, т.е. значение baseline эквивалентно нулю. Следовательно, если мы хотим указать какой-либо сдвиг в вертикальном выравнивании, то этот сдвиг будем указывать относительно базовой линии (или же нуля).

Можно написать так:

vertical-align:10px;

И получим сдвиг фрагмента с увеличенным шрифтом вверх на 10 пикселей относительно базовой линии. Если напишем отрицательное значение:

vertical-align:-10px;

То получим сдвиг фрагмента вниз относительно базовой линии. Из примеров видно, что из-за сдвига увеличилась высота строки, чтобы текст помещался в ней без наезда на соседнюю строку. Сдвиг можно также задавать в Em и Ex, ну, и в процентах, которые будут считаться от высоты линии этого элемента (помните в прошлой статье мы научились ее задавать с помощью line-height).

Для вертикального выравнивания содержимого ячеек таблиц в vertical-align следует использовать значения Top и Bottom для получения, соответственно, выравнивания содержимого по верхней и нижней границе ячейки (ну, а middle в ячейке таблицы используется как значение вертикального выравнивания по умолчанию).

А для шрифтовых элементов можно использовать text-top, text-bottom, middle. Давайте для примера применим к этому фрагменту текста значение:

vertical-align:middle;

Совет

Что получилось в результате? По базовой линии обычного текста выровнялась средняя линия увеличенного фрагмента, т.е. мы получили вертикальное выравнивание по средней линии. Для text-top и text-bottom будет все аналогично. Вот так text-top, а так text-bottom.

Значения Css свойства vertical-align sub и super соответствуют под- и надиндексу, которые имели место быть в чистом Html (до использования CSS свойств для визуального оформления).

Text-transform, letter-spacing, word-spacing и white-space

Дальше у нас на очереди text-transform — трансформация символов. Оно так же применяется к любым Html элементам (и блочным, и строчным) и может иметь всего четыре значения:

None используется по умолчанию и означает, что символы в тексте изменяться никак не будут — как написано в Html, так и будут отображаться. Значение Uppercase для text-transform позволит трансформировать все буквы фрагмента в заглавные (пример показан в этом предложении, где использовалось правило text-transform:uppercase, а изначально буквы были написаны строчные).

Значение lowercase для Css правила text-transform позволит вам трансформировать все символы фрагмента в строчные, ну, а значение capitalize сделает все первые буквы слова заглавными (пример в этом предложении — text-transform:capitalize). Т.е. с помощью text-transform можно сделать все что угодно с обычным текстом, а потом запросто все вернуть обратно.

Поэтому, если у вас, например, стоит задача сделать все заголовки написанными только заглавными буквами, то в Html пишите их обычно, а заглавными их сделаете уже в CSS через text-transform:uppercase. Потом, если вы решите что-то поменять назад, то достаточно внести только маленькое изменение в стили, а не в содержимое всех 100500 заголовков на вашем сайте.

Дальше давайте рассмотрим CSS правила, которые позволят нам изменять расстояния между символами и словами — letter-spacing и word-spacing. Оба эти правила могут иметь два типа значений:

По умолчанию и letter-spacing, и word-spacing имеют значение Normal, ну или это тоже самое, что ноль (т.е. расстояние между символами и словами никак не изменяется). Величину же изменения расстояния в этих правилах можно будет указывать только в пикселах, либо Em или Ex, но никак не в процентах.

Однако, можно использовать как положительные (разрежение символов или слов), так и отрицательные значения (сближение символов или слов). Например, можно «вот так разредить символы в этой фразе» с помощью следующего Css правила:

letter-spacing:0.4em;

Или же можно «вот так сблизить символы в этой фразе» с помощью:

letter-spacing:-1px;

Обратите внимание

Тоже самое можно сказать и про word-spacing с одной лишь только разницей, что при этом расстояние будет изменяться уже между словами, как, например, в этой фразе, при помощи вот такой вот CSS конструкции:

word-spacing:4em;

Аналогично можно использовать в word-spacing отрицательные значения для уменьшения расстояния между словами.

Ну, и последнее на сегодня Css правило, которое позволяет определенным образом оформлять текст в Html коде — это white-space. Отвечает оно за отображение пробельных символов на веб странице, которые имели место быть при написании Html кода.

Как вы помните из статьи про символы пробела в Html, браузер при разборе кода объединяет все пробелы, символы переноса строк и табуляции в один единственный пробел, и осуществляет перенос строк на веб странице именно по пробельным символам, которые имели место быть в коде.

Так вот, white space может принимать одно из трех значений:

Понятно, что по умолчанию используется значение Normal и в этом случае все отображается так, как я описал чуть выше.

А вот при использовании значения Pre мы получим полную аналогию с использованием тега Pre в чистом Html, т.е.

на вебстранице текст будет отображен со всеми теми лишними пробельными символами, которые имели место быть при написании кода и переносы браузер уже по ним сделать не сможет.

Ну, а значение nowrap просто запретит браузеру переносить по тем пробельным символам, которые он найдет внутри фрагмента с CSS правилом white-space:nowrap. Попробовать, как все это работает, вы сможете и сами, создав простенький Html файлик и заключив любой фрагмент текста в подобные теги:

Читайте также:  Что такое лол

фрагмент подопытного текста

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

* Нажимая на кнопку «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

Подборки по теме

Использую для заработка

Рубрика: Как разобраться в CSS

Источник: https://KtoNaNovenkogo.ru/html/uroki-css/svojstva-css-text-decoration-vertical-align-text-align-text-indent-oformleniya-html.html

Свойство CSS text-align-last

Свойство text-align-last (не путать с HTML align) определяет, как будет выравниваться последняя строка блока или строка перед принудительным разрывом. Это важно, так как в последней строке абзаца, как правило, не содержится достаточно текста, чтобы заполнить все пространство.

В этой статье мы рассмотрим все аспекты, касающиеся свойства text-align-last, в том числе принимаемые значения и поддержку браузерами.

Использование и принимаемые значения

Применять свойство text-align-last просто. Вот фрагмент кода для выравнивания последней строки текста по правому краю:

.intro-graph { text-align: justify; // Required for IE and Edge text-align-last: right; }

Свойство может принимать семь значений. Вам, вероятно, известны стандартные значения HTML text align:left, right и center. Они выравнивают текст в последней строке по правому краю, по левому краю и по центру контейнера.

Приведенный ниже пример иллюстрирует различия между этими тремя значениями:

Посмотреть пример

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

Важно

Это достигается за счет добавления соответствующего количества пробелов между словами.

В зависимости от количества текста это свойство можно использовать, чтобы полностью заполнить пространство в последней строке, но при этом не получить слишком большие разрывы между словами.

Текст во втором абзаце также распределен по ширине, но так как последняя строка содержит только одно слово, оно располагается слева.

Посмотреть пример

Выравнивание последней строки текста по левому краю подходит для языков, которые читаются слева направо (LTR), но это будет неправильно для языков RTL. В таких случаях использование значений left или right может вызвать проблемы.

К счастью, можно использовать значение start, чтобы выровнять текст по краю, с которого начинается написание и чтение. Это означает, что, установив для свойства text-align-last значение start, вы выровняете текст по левому краю для языков LTR и по правому краю для языков RTL.

Также можно использовать значение end, чтобы выровнять текст по противоположному краю от того, с которого начинается написание и чтение. Это будет соответствовать значению right для языков LTR и left для языков RTL.

Посмотреть пример

Значение по умолчанию для этого свойства auto.

В случае его использования текст в последней строке выравнивается в соответствии со значением свойства HTML text align, если только для него не задано значение justify.

Иначе текст распределяется по ширине контейнера, только если для свойства text-justify задано значение distribute. В противном случае текст выравнивается по краю, с которого начинается написание и чтение.

Важные замечания

Чтобы text-align-last работало, для свойства text-align должно быть задано значение justify. Но это правило реализовано только в IE и Edge. В Firefox и Chrome свойство работает и без установки для text-align значения justify.

В приведенном ниже примере текст должен быть выровнен по правому краю в Edge и IE.

В других браузерах последние строки абзацев будут выравниваться в соответствии со значением свойства text-align-last, а остальные строки будут выровнены по правому краю.

Посмотреть демо-версию

Если мы не задаем для text-align значение align justify HTML, результат выглядит не столь привлекательно. Поэтому вы, вероятнее всего, установите распределение текста по ширине.

Свойство работает, даже если в абзаце присутствует принудительный разрыв строки, заданный с помощью тега
или чего-то в этом роде.

Имейте в виду, что это свойство будет влиять на все последние строки текста внутри указанного элемента, а не только на самую крайнюю.

Совет

Например, если текст внутри элемента article или div содержит три абзаца, в каждом из них последняя строка будет выравниваться в соответствии со значением свойства text-align-last, заданным для всего родительского элемента.

Если нужно выровнять только самую последнюю строку контента, то можно использовать селекторы :last-child или :last-of-type. Возьмите код из приведенной ниже демо-версии в качестве примера:

article { text-align: justify; } article p:last-of-type { text-align-last: right; }

Он выравнивает последнюю строку последнего абзаца нашей статьи по правому краю. Остальные строки выравниваются на основе значения свойства HTML text align.

Посмотреть демо-версию

Также можно использовать другие селекторы: :even и :odd, чтобы изменить выравнивание.

Иногда абзац может состоять только из одной строки. В этом случае, если вы указали значения и для свойства text-align, и для свойства text-align-last, то последнее свойство будет иметь приоритет.

Рассмотрим следующий фрагмент кода:

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

Если второй абзац имеет только одну строку, то текст будет выравниваться по левому краю, потому что text-align-last будет иметь приоритет. В приведенной ниже демо-версии показан данный код CSS в действии, а также несколько других примеров HTML align.

Посмотреть демо-версию

Поддержка браузерами

Источник: https://www.internet-technologies.ru/articles/svoystvo-css-text-align-last.html

Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие)

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие, предназначенные для оформления текста html.

В прошлой статье мы рассмотрели свойства font-family, font-size, color и другие атрибуты CSS, которые позволяют задавать параметры шрифтов. Если вы впервые слышите о CSS, то обязательно прочтите статью о назначении каскадных таблиц стилей.

Выравнивание текста с помощью CSS

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

text-align: left|right|center|justify

Доступные значения этого правила  определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

Обратите внимание

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.

 Примеры использования свойства:

p { text-align: justify }
h1 { text-align: center }

Следующее свойство CSS text-ident задает отступ для красной строки, например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:

text-indent:<\p>

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус.

Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки.

По умолчанию отступ «красной строки» равен нулю. Пример:

p { text-ident: 10px; }

Далее рассмотрим вертикальное выравнивание — свойство vertical-align. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|

Рассмотрим каждое значение подробнее:

  • baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
  • sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
  • super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
  • top — выравнивание фрагмента текста по верхнему краю родительского элемента;
  • text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
  • middle — выравнивание центра фрагмента текста по центру родительского элемента;
  • bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
  • text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

 Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что  и  запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

  • top — для выравнивания содержимого по верхней границе ячейки;
  • bottom — для выравнивания содержимого по нижней границе ячейки;
  • middle — для выравнивания по центру ячейки (используется по умолчанию).

Для достижения нужного результата, обычно приходится экспериментировать с различными значениями свойства стиля vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.

Параметры white-space  и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег , помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет  следующий синтаксис:

white-space: normal|pre|nowrap|pre-wrap|pre-line

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

Важно

Использование значения , будет полной аналогией при применении тега . Браузер будет отображать страницу с учетом всех лишних пробелов и переносов, как они были добавлены разработчиком. Если строка текста получиться слишком длинной, то будет добавлена горизонтальная полоса прокрутки.

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега
позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

Ну и значение pre-line преобразует пробелы в один пробел, переводы строк сохраняются и браузер может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

Читайте также:  Iqoption бинарный опцион

Пример использования:

p { white-space: pre; }

Далее рассмотрим параметр word-wrap, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:

p { word-wrap: break-word; }

Параметры тени у текста — свойство text-shadow

 Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web  страницу. Синтаксис:

text-shadow: none | []

Значение none отменяет добавление тени у текста и установлено по умолчанию.

Цвет тени задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.

Горизонтальное смещение тени можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет располагаться правее текста, при отрицательном — левее. Нулевое значение расположит тень прямо под текстом и  имеет смысл только если задано размытие  тени.

Вертикальное смещение тени тоже можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет смещаться ниже текста, при отрицательном — выше. Нулевое значение расположит тень прямо под текстом.

В любой единице измерения задается и радиус размытия тени. Чем больше это значение, тем шире становится тень и сильнее сглаживается. Если этот параметр не установлен, то значение размытие предполагается равным нулю. Так как алгоритм сглаживания обычно у разных браузеров отличается, то и вид тени может несколько отличаться в зависимости от браузера.

Рассмотрим пример:

p { text-shadow: red 1px 1px 2px; font-size: 2em;

}

И вот так будет выглядеть текст абзаца p  с применением данного правила стиля в Internet Explorer 11:

Источник: http://webcodius.ru/spravochnik-css/svojstva-css-dlya-oformleniya-teksta-html-vertical-align-text-align-text-indent.html

CSS text-align: выравнивание текста по горизонтали — учебник CSS

В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:

Как необходимо выровнять текст?Подходящее значение
По левому краю left
По правому краю right
По центру страницы/блока center
По ширине страницы/блока justify
Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю) start
Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю) end

Пример записи стиля:

p { text-align: left; }

Рекомендации по использованию стилей

Значения left, right и centerТекст, выровненный по левой стороне, практически всегда хорошо выглядит на веб-страницах и удобно читается.

Выравнивание по правому краю в европейских языках, как правило, используется редко, однако совсем бесполезным его назвать нельзя: такой стиль пригодится для красивого оформления подписей к фото или цитатам, выравнивания содержимого ячеек таблиц или небольших фрагментов текста. Для этих же целей часто используется значение center.

Значение justifyВыравнивание текста в CSS по ширине (justify) можно применять для печатных версий страниц, но не рекомендуется увлекаться этим стилем на веб-страницах, созданных для просмотра на мониторе. Почему? На первый взгляд – выровненный по ширине текст выглядит красиво и ровно, как колонка в газете.

Но чтобы так растянуть текст, браузеру приходится добавлять дополнительное пространство между словами, вследствие чего в тексте могут образовываться некрасивые зазоры, затрудняющие чтение.

Совет

В программах, предназначенных для подготовки данных к печати, происходит намного более тонкая настройка интервалов в тексте, а также нередко используется перенос слов, чего нет во многих браузерах.

Поэтому необходимо проверять, как выглядит на веб-страницах текст, выровненный по ширине, и в первую очередь задавать себе вопрос: удобен ли он для чтения? Особенно это касается узких блоков текста (в т. ч. мобильных версий страниц).

Значения start и endЗначения start и end для свойства text-align внедрены в CSS3 и работают практически так же, как left и right, но есть разница. Применив значение start к тексту, который идет слева направо (LTR – left-to-right), выравнивание будет по левому краю (соответственно, для текста, идущего справа налево (RTL – right-to-left), выравнивание будет по правому краю). Логично, что значение end работает противоположным образом (то есть выравнивает по правому краю LTR-текст и по левому краю – RTL-текст). Эти два значения не поддерживаются некоторыми браузерами, включая Internet Explorer, поэтому, если нет острой необходимости в их применении, рекомендуем использовать значения left и right.

На скриншотах показаны примеры использования различных значений для свойства CSS text-align:

Скриншот 1: выравнивание LTR-текста по левому краю при помощи значения start. Аналогичного вида можно добиться при помощи значения left.Скриншот 2: выравнивание LTR-текста по правому краю при помощи значения end. Аналогичного вида можно добиться с помощью значения right.Скриншот 3: выравнивание текста по ширине.

При мелком шрифте и большой ширине страницы/блока такой вариант выравнивания текста на веб-странице смотрится приемлемо.Скриншот 4: увеличен размер шрифта и уменьшена ширина блока по сравнению с предыдущим примером. Как видим, появились некрасивые зазоры в тексте (подчеркнуты красной линией).

Скриншот 5: два способа выравнивания текста на примере mobile-версии нашего учебника (слева – text-align: left, справа – text-align: justify). Попробуйте прочитать текст в обеих колонках и определить, какой вариант более комфортен для чтения.

Далее в учебнике: стиль для списков: свойство CSS list-style и его производные.

Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/text-align

text-align

The text-align CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent; /* Character-based alignment in a table column */
text-align: «.»;
text-align: «.» center; /* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center; /* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

The text-align property is specified in one of the following ways:

Values

start The same as left if direction is left-to-right and right if direction is right-to-left.end The same as right if direction is left-to-right and left if direction is right-to-left.leftThe inline contents are aligned to the left edge of the line box.

rightThe inline contents are aligned to the right edge of the line box.centerThe inline contents are centered within the line box.justifyThe inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

justify-all Same as justify, but also forces the last line to be justified.match-parent Similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value.

When applied to a table cell, specifies the alignment character around which the cell's contents will align.

Formal syntax

start | end | left | right | center | justify | match-parent

Examples

Left alignment

HTML

Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS

.example { text-align: left; border: solid;
}

Result

Centered text

HTML

Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS

.example { text-align: center; border: solid;
}

Result

Justify

HTML

Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS

.example { text-align: justify; border: solid;
}

Result

Notes

The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.:

.something { margin: auto;
}
.something { margin: 0 auto;
}
.something { margin-left: auto; margin-right: auto;
}

Accessibility concerns

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

Specifications

Initial value

Applies to

Inherited

Media

Computed value

Animation type

Canonical order

start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.
block containers
yes
visual
as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right
discrete
order of appearance in the formal grammar of the values

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support

Prefixed center, left, and right values for block alignmentDeprecatedNon-standard

Flow-relative values start and endExperimental

match-parentExperimental

justify-allExperimental

Character-based alignment in a table column ( value)Experimental

Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 3 Opera Full support Yes Safari Full support 1 WebView Android Full support Yes Chrome Android Full support Yes Edge Mobile Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS ? Samsung Internet Android Full support Yes
Chrome Full support 1PrefixedFull support 1PrefixedPrefixed Implemented with the vendor prefix: -webkit- Edge ? Firefox Full support 1PrefixedFull support 1PrefixedPrefixed Implemented with the vendor prefix: -moz- IE No support No Opera ? Safari Full support 1.3PrefixedFull support 1.3PrefixedPrefixed Implemented with the vendor prefix: -webkit-Full support 1PrefixedPrefixed Implemented with the vendor prefix: -khtml- WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome Full support 1 Edge No support No Firefox Full support 1 IE No support No Opera ? Safari Full support 3.1 WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 4 Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome Full support 16 Edge ? Firefox Full support 40 IE No support No Opera ? Safari No support No WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 40 Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome No support No Edge No support No Firefox No support No IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Edge Mobile No support No Firefox Android No support No Opera Android No support No Safari iOS No support No Samsung Internet Android No support No
Chrome No support No Edge ? Firefox No support No IE ? Opera ? Safari No support No WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS No support No Samsung Internet Android ?
Читайте также:  Как скруглить углы в html через css

Full support  Full supportNo support  No supportCompatibility unknown  Compatibility unknownExperimental. Expect behavior to change in the future.Experimental. Expect behavior to change in the future.Non-standard. Expect poor cross-browser support.Non-standard. Expect poor cross-browser support.Deprecated. Not for use in new websites.Deprecated. Not for use in new websites.Requires a vendor prefix or different name for use.Requires a vendor prefix or different name for use.

See also

  • margin:auto, margin-left:auto, vertical-align

Источник: https://developer.mozilla.org/docs/Web/CSS/text-align

CSS text-align

11. 12. 13. Умение легко перейти от шутки к серьезному и от 14. серьезного к шутке требует большего таланта, 15. чем обыкновенно думают. Нередко шутка служит 16. проводником такой истины, которая не достигла 17. бы цели без ее помощи. Фрэнсис Бэкон. 18. 19. 20. 21. Если вы направляете в чей-либо адрес остроту, 22. вы должны быть готовы принять ее и в свой адрес. Джонатан Свифт. 23. 24. 25. 26. 27.

Свойство text-align

Значение string допускается применять только к ячейкам таблицы. Если в качестве значения свойства text-align уставлено содержимое находящееся боле чем в одной ячейки, то содержимое данных ячеек будет выровнено вдоль вертикальной оси. Следующий CSS

  1. TD { text-align: «.» }
  2. TD:before { content: «$» }

будет причиной появления знака доллара перед содержимым каждой ячейки и выравнивания ячейки по вертикальной оси.

  1. Long distance calls
  2.
  3.
  4.
1.30
  5.
2.50
  6.
10.80
  7.
111.01
  8.
85.
  9.
90
10.
.05
11.
.06
12.

Свойство text-align может принимать значение collapse для строк, групп строк, столбцов, групп столбцов.

При этом, в результате строки (группы строк) или столбцы (группы столбцов) будут полностью удалены, а последующее содержимое поднимется вверх, заполнив образовавшееся пространство.

Поскольку свойство text-align обладает способностью к наследованию, поэтому всё содержимое последующих блочных элементов, расположенных внутри элемента div с классом center так же будет выровнено по середине элемента.

  1.
  2.
  3.
25.
26.
27.
28. Центральный блок
29.
30. Блок внутри блока с классом center
31.
32. Блок внутри блока, который располагается внутри блока с классом center
33.
34.
35.
36.
37.
38.
39.

Пример свойства width

Примечание свойство не выравнивает сам блок, выравниванию подвергается только содержимое блочного элемента.

Следует помнить, что аналогом данному свойству является HTML атрибут align. В Internet Explorer 5 версии данное свойство реализован неверно, так как блок выравнивается по центру, а не его содержимое.

Атрибут align имеет меньший приоритет по сравнению с правилом CSS, поэтому в следующем примере текст будет выровнен по левому краю, а не по правому:

  1.
  2.
  3.
14.
15.
16. И сказал Господь Бог: не хорошо быть человеку одному. Бытие, II, 18.
17.
18.
19.
20.

Познавательный пример, объясняющий свойство text-align:

  1.
  2.
  3.
11.
12.
14. Нажим на меня!
15.
16.

Источник: http://slyweb.ru/cssmanual/text-align.php

CSS text-align-last Свойство

Выравнивание последней строки текста в трех элементах :

div.a {     text-align: justify;  /* For Edge */    text-align-last: right; }div.b {     text-align: justify; /* For Edge */     text-align-last: center; }div.c {     text-align: justify; /* For Edge */     text-align-last: justify;

}

Подробнее примеры ниже.

Определение и использование

Свойство text-align-last указывает, как выровнять последнюю строку текста.

Обратите внимание, что свойство text-align-last задает выравнивание для всех последних строк в выбранном элементе. Таким образом, если у вас есть с тремя абзацами в нем, text-align-last будет применяться к последней строке каждого абзаца. Чтобы использовать text-align-last только для последнего абзаца в контейнере, можно использовать: последний дочерний элемент, см. пример ниже.

Примечание: В EDGE/Internet Explorer свойство text-align-last работает только с текстом, который имеет выравнивание по тексту: выравнивание.

Значение по умолчанию:

Inherited:

Animatable:

Version:

Синтаксис JavaScript:

auto
yes
no. Читайте о animatable
CSS3
object.style.textAlignLast=»right»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.

Свойство
text-align-last 47.0 5.5 54.012.0 -moz- Не поддерживается 34.0

Примечание: В EDGE/Internet Explorer значения «Start» и «End» не поддерживаются.

Синтаксис CSS

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

Значения свойств

ЗначениеОписание
auto Значение по умолчанию. Последняя строка выровнена по левому краю
left Последняя строка выравнивается по левому краю
right Последняя строка выравнивается по правому краю
center Последняя строка выравнивается по центру
justify Последняя строка оправдана, так как остальные строки
start Последняя строка выравнивается в начале строки (слева, если текст-направление слева направо, а справа-направление текста справа налево).
end Последняя строка выравнивается в конце строки (справа, если направление текста слева направо, а слева-направление текста справа-налево).
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Используйте text-align-last только на самой последней строке в контейнере:

div.b p:last-child {    text-align-last: center;

}

Похожие страницы

CSS Справочник: CSS Text

HTML DOM Справочник: textAlignLast Свойство

Источник: https://html5css.ru/cssref/css3_pr_text-align-last.php

Урок 5: Текст — HTML.net

Форматирование и установка стиля текста — ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

Отступы [text-indent]

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам

:

Выравнивание текста [text-align]

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.

В примере текст заголовочных ячеек таблицы выравнивается вправо, а в ячейках данных

— по центру. Кроме того, нормальные параграфы — justify:

th { text-align: right; } td { text-align: center; } p { text-align: justify; }

Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные «декоративные эффекты». Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере

подчёркнуты,

— имеют черту над текстом, а

— перечёркнуты.

h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

Интервал между буквами [letter-spacing]

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение — нужная величина. Например, если вам необходимо 3px между буквами в параграфах

и 6px — в заголовках

, то используется такой код:

h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

Трансформация текста [text-transform]

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово «headline» можно показать «HEADLINE» или «Headline». Имеются четыре возможных значения text-transform:

capitalizeКапитализирует каждое слово. Например: «john doe» станет «John Doe».uppercaseКонвертирует все символы в верхний регистр. Например: «john doe» станет «JOHN DOE».lowercaseКонвертирует все символы в нижний регистр. Например: «JOHN DOE» станет «john doe».noneТрансформации нет — текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью

  • (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.

    Видите, HTML-код в этом примере в действительности записан в нижнем регистре.

    h1 { text-transform: uppercase; } li { text-transform: capitalize; }

    Резюме

    В течение трёх последних уроков вы вы изучили несколько CSS-свойств, но их  — множество. В следующем уроке мы рассмотрим работу со ссылками.

    >

  • Источник: http://ru.html.net/tutorials/css/lesson5.php

    CSS text-align (выравнивание текста по горизонтали в CSS)

    Свойство text-align  позволяет задать выравнивание текста по горизонтали в CSS.Возможные значения: left, center, right, justify, start, end

    Значение по умолчанию: left

    Наследуется: Да

    Пример:

        CSS text-align    

    Выравнивание по левому краю (left). Здесь текст будет выравниваться по левому краю. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

    Выравнивание по центру (center).

    Здесь текст будет выравниваться по центру. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

    Выравнивание по правому краю (right). Здесь текст будет выравниваться по ширине.

    Обратите внимание

    Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

    Выравнивание по ширине (justify). Здесь текст будет выравниваться по правому краю.

    Обратите внимание

    Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

    Выравнивание по началу текста (start). Здесь текст будет выравниваться по началу.

    Разница будет заметна при использовании языков с начертанием справа налево. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

    Выравнивание по концу текста (end).

    Здесь текст будет выравниваться по концу. Разница будет заметна при использовании языков с начертанием справа налево.  Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

    CSS text-align (выравнивание текста по ширине в CSS)

    Посмотреть результат. Обратите внимание на границы текста. В первом абзаце граница текста слева идёт на одном уровне. Во втором абзаце текст выровнен по центру.

    Источник: https://urvanov.ru/2016/02/15/css-text-align/

    Ссылка на основную публикацию