Decorating text with CSS. CSS properties text-decoration, vertical-align, text-align, text-indent for decorating text in Html HTML tags that define text alignment, indent
Sets the alignment of the last line of a block of text.
brief information
Notation
| Description | Example | |
|---|---|---|
| <тип> | Specifies the type of the value. | <размер> |
| A&&B | The values must be output in the specified order. | <размер> && <цвет> |
| A | B | Indicates that only one of the suggested values (A or B) should be selected. | normal | small-caps |
| A || B | Each value can be used alone or in combination with others in any order. | width || count |
| Groups values. | [ crop || cross] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Values
auto Matches the alignment specified by the text-align property, except for the value justify . For it, the alignment will be like start . start The line is aligned to the start edge of the block, which can change depending on the direction of the text (left to right or right to left). end The line is aligned with the block's end edge, which is determined by the direction of the text. left The string is left-aligned. right The string is right-aligned. center The string is centered. justify The string is justified in width. If there is only one word in the last line, then it will be left-aligned.
The effect of different values on the position of the text is shown in Table. one.
| Meaning | alignment | Type of text |
|---|---|---|
| left | Left | |
| right | Right |  |
| center | Centered |  |
| justify | By width |  |
Sandbox
Winnie the Pooh was always not averse to a little refreshment, especially at eleven o'clock in the morning, because at that time breakfast had long ended, and dinner had not even thought of starting. And, of course, he was terribly glad to see that the Rabbit took out cups and plates.
div ( text-align-last: start ; )
Example
Object Model
An object.style.textAlignLast
Note
Internet Explorer and Edge do not support start and end values.
Firefox prior to version 49 supports the -moz-text-align-last property.
Specification
Each specification goes through several stages of approval.
- Recommendation (Recommendation) - the specification is approved by the W3C and recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but the support of the development community is required to implement the standard.
- Proposed Recommendation ( Suggested recommendation) - at this stage, the document is submitted to the W3C Advisory Board for final approval.
- Working Draft - A more mature version of the draft after discussion and amendments for community review.
- Editor's draft ( Editorial draft) is a draft version of the standard after changes have been made by the project editors.
- draft ( Specification draft) is the first draft version of the standard.
The CSS text-align property controls the horizontal alignment of text, as well as images and other elements. The property has 4 possible alignment options.
CSS Syntax text-align
...text-align : center | justify | left | right | inherit; ...
- center - alignment to the center of the area (for example, the width of the area is 500 pixels, so there will be alignment along the line of 250 pixels)
- justify - stretch the text to fit the full width of the area
- left - left alignment
- right - right alignment
- inherit - accept the value of the ancestor (parent)
Most often these properties are used in blocks.
Note:
There is also the vertical-align property, which controls the vertical alignment.
how to align text in html
Example #1.
Align text to the left. Active by default.
Выравнивание текста по левому краю
Выравнивание текста по левому краю
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
Выравнивание текста по центру
На странице преобразуется в следующее
Выравнивание текста по левому краю
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
Выравнивание текста по правому краю
На странице преобразуется в следующее
Выравнивание текста по правому краю
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Выравнивание текста по ширине всей области
Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
ПримечаниеВместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Выравнивание по центруВыравнивание текста по ширине всей области
... ...
Разница в тегах
В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
Свойство 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 .
Посмотреть демо-версию
Поддержка браузерами
Поддержка этого свойства может быть включена с помощью опции «Включить экспериментальные функции веб-платформы » в Google Chrome и Opera , начиная с версий 35 и 22 соответственно. Оно полностью поддерживается в Chrome 47+ и Opera 34+ .
Чтобы использовать это свойство в Firefox , придется добавлять префикс -moz- . Значения start и end не поддерживаются IE . В то же время, Edge полностью поддерживает это свойство. Единственный популярный браузер, который полностью не поддерживает text-align-last — это Safari .
HTML теги, определяющие выравнивание текста, отступ
Выровненный по ширине текст используется в типографии
В примере ниже показано, как выровнить текст по ширине страницы:
| align="left" | align="right" |
|---|---|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
|
| align="justify" | align="center" |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
Значение justify обеспечивает равномерное выравнивание текста справа и слева , то есть по ширине . Такой метод широко используется в печати.
Выравнивание текста в HTML по центру и по ширине
Выравнивание текста в HTML по центру, текст справа :
Результат:
Атрибуты и значения
- align="left" - определяет выравнивание текста слева (по умолчанию).
- align="center" - выравнивает текст по центру .
- align="right" - выравнивает текст справа .
Выравнивание | HTML отступ текста
HTML текст и его отступ слева страницы
Произведем отступ текста слева двумя способами:
Результат:
Посмотреть в новом окне.
| 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+ | ||
Краткая информация
Версии CSS
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.HTML5 CSS2.1 IE Cr Op Sa Fx
The result of this example is shown in Fig. one.
Rice. 1. Text Alignment in Safari Browser
Internet Explorer up to version 7.0 inclusive treats this example somewhat differently than other browsers, aligning not only text, but also blocks (Fig. 2).
Rice. 2. Text Alignment in Internet Explorer 7
Object Model
document.getElementById("elementID ").style.textAlign
Browsers
IE up to and including version 7.0 aligns not only the contents of a block element, but the element itself.
