Какие значения может принимать свойство text align. CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html

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

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

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

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

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

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

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

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

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

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

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

• 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 странице.

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

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

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

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

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

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

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

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

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

word-wrap: normal|break-word

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

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

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

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

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

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

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

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

HTML теги, определяющие выравнивание текста, отступ

Выровненный по ширине текст используется в типографии

В примере ниже показано, как выровнить текст по ширине страницы:

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

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

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

Результат:

Атрибуты и значения

• align="left" - определяет выравнивание текста слева (по умолчанию).
• align="center" - выравнивает текст по центру .
• align="right" - выравнивает текст справа .

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

HTML текст и его отступ слева страницы

Произведем отступ текста слева двумя способами:

Результат:

Посмотреть в новом окне.

Модуль CSS-текст описывает функции CSS, которые управляют переводом исходного текста в форматированный и переносом строк. Различные свойства CSS обеспечивают контроль над преобразованием регистра, обработкой пробелов, правилами переноса и переносом текста и строк, выравниванием, интервалами и отступами.

Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

1. Преобразование текста: свойство text-transform

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

Свойство наследуется.

Синтаксис

Text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit; text-transform: initial;

2. Обработка пробелов и переносы строк: свойство white-space

Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

Свойство наследуется.

Синтаксис

White-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; white-space: inherit; white-space: initial;

3. Настройка табуляции: свойство tab-size

Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

Работает только для элементов и <pre>Для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.</p> <p>Свойство наследуется.</p> <p><b>Синтаксис </b></p><p>Tab-size: 0; tab-size: 10px; tab-size: inherit; tab-size: initial; </p><h3>4. Разрыв строки и границы слов</h3> <p>Когда содержимое на строчном уровне разбивается на строки, оно разбивается на <a href="/shkolnyi-laboratornyi-blok-pitaniya-shema-lineinyi-laboratornyi-blok-pitaniya/">линейные блоки</a>. Такое разбиение называется разрыв строки.</p> <p>Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега <br> , начала или конца блока — это <a href="/udalit-vse-razryvy-stranic-word-kak-udalit-prinuditelnyi/">принудительный разрыв</a> строки.</p> <p>Если строка обрывается из-за переноса содержимого, когда браузер создает необязательные разрывы строк, чтобы вписать содержимое — это мягкий перенос.</p> <h4>4.1. Правила разрыва для букв: свойство word-break</h4> <p>Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.</p> <p>Свойство наследуется.</p> <p><b>Синтаксис </b></p><p>Word-break: normal; word-break: break-all; word-break: keep-all; word-break: inherit; word-break: initial; </p><h4>4.2. Разрыв строки: line-break</h4> <p>Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.</p> <p>Свойство наследуется.</p> <table class="t1"><tr><th colspan="2">line-break </th> </tr><tr><td>Значения: </td> <td> </td> </tr><tr><td> auto </td> <td>Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию. </td> </tr><tr><td> loose </td> <td>Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах. </td> </tr><tr><td> normal </td> <td>Разбивает текст, используя наиболее распространенный набор правил переноса строк. </td> </tr><tr><td> strict </td> <td>Разбивает текст, используя строгий набор правил переноса строк. </td> </tr><tr><td> initial </td> <td>Устанавливает значение свойства в значение по умолчанию. </td> </tr><tr><td> inherit </td> <td>Наследует значение свойства от родительского элемента. </td> </tr></table><p><b>Синтаксис </b></p><p>Line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: inherit; line-break: initial; </p><h4>4.3. Расстановка переносов: свойство hyphens</h4> <p>Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.</p> <p>Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.</p> <p>CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.</p> <p>Свойство наследуется.</p> <table class="t1"><tr><th colspan="2">hyphens </th> </tr><tr><td>Значения: </td> <td> </td> </tr><tr><td> none </td> <td>Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса. </td> </tr><tr><td> manual </td> <td>Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (<a href="/chto-takoe-taitl-v-anime-ne-ispolzuite-specialnyh-simvolov/">специальный символ</a> -). Значение по умолчанию. </td> </tr><tr><td> auto </td> <td>Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный <a href="/kak-v-word-postavit-perenosy-avtomaticheskaya-rasstanovka-perenosov-v/">автоматический перенос</a> слов. </td> </tr><tr><td> initial </td> <td>Устанавливает значение свойства в значение по умолчанию. </td> </tr><tr><td> inherit </td> <td>Наследует значение свойства от родительского элемента. </td> </tr></table><p><b>Синтаксис </b></p> <p>Hyphens: none; hyphens: manual; hyphens: auto; hyphens: inherit; hyphens: initial; </p><h4>4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap</h4> <p>Свойство overflow-wrap (или его устаревшее имя word-wrap) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.</p> <p>Свойство наследуется.</p> <table class="t1"><tr><th colspan="2">overflow-wrap, word-wrap </th> </tr><tr><td>Значения: </td> <td> </td> </tr><tr><td> normal </td> <td>Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию. </td> </tr><tr><td> break-word </td> <td> </td> </tr><tr><td> anywhere </td> <td>Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого. </td> </tr><tr><td> initial </td> <td>Устанавливает значение свойства в значение по умолчанию. </td> </tr><tr><td> inherit </td> <td>Наследует значение свойства от родительского элемента. </td> </tr></table><p><b>Синтаксис </b></p><p>Overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; overflow-wrap: inherit; overflow-wrap: initial; </p><h3>5. Выравнивание и выключка строк</h3> <p>Выравнивание и выключка строк контролируют, как встроенный контент распределяется в линейном блоке.</p> <h4>5.1. Краткая запись для выравнивания текста: свойство text-align</h4> <p>Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent , присваиваются text-align-all и сбрасываются в text-align-last на auto .</p> <p>Свойство наследуется.</p> <table class="t1"><tr><th colspan="2">text-align </th> </tr><tr><td>Значения: </td> <td> </td> </tr><tr><td> start </td> <td>Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию. </td> </tr><tr><td> end </td> <td>Содержимое на уровне строки выравнивается по конечному краю линейного блока. </td> </tr><tr><td> left </td> <td>Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. </td> </tr><tr><td> right </td> <td>Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. </td> </tr><tr><td> center </td> <td>Содержимое на уровне строки центрируется внутри линейного блока. </td> </tr><tr><td> justify </td> <td>Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last , последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. <a href="/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak-ustanovit/">Разные браузеры</a> могут увеличить как отступы между словами, так и интервалы между буквами. </td> </tr><tr><td> justify-all </td> <td>Устанавливает text-align-all и text-align-last в justify , также выравнивая последнюю строку. </td> </tr><tr><td> match-parent </td> <td>Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right . </td> </tr><tr><td> inherit </td> <td>Наследует значение свойства от родительского элемента. </td> </tr></table><p><b>Синтаксис </b></p><p>Text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: match-parent; text-align: inherit; </p><h4>5.2. Выравнивание текста по умолчанию: свойство text-align-all</h4> <p>Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last . Принимает значения start , end , left , right , center , justify и match-parent .</p> <p>Свойство наследуется.</p> <p><b>Синтаксис </b></p><p>Text-align-all: start; text-align-all: end; text-align-all: left; text-align-all: right; text-align-all: center; text-align-all: justify; text-align-all: match-parent; text-align-all: inherit; </p><h4>5.3. Выравнивание последней строки: свойство text-align-last</h4> <p>Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.</p> <p>Если задано значение auto , содержимое в соответствующей строке выравнивается по text-align-all , если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align .</p> <p>Принимает значения auto , start , end , left , right , center , justify и match-parent .</p> <p>Свойство наследуется.</p> <p><b>Синтаксис </b></p><p>Text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; text-align-last: match-parent; </p><h3>6. Промежутки</h3> <p>CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing .</p> <h4>6.1. Промежутки между словами: свойство word-spacing</h4> <p>Свойство word-spacing определяет дополнительный интервал между словами.<br> Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.</p> <p>На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.</p> <p>Свойство наследуется.</p> <p><b>Синтаксис </b></p><p>Word-spacing: normal; word-spacing: 1px; word-spacing: 0.2em; word-spacing: 50%; word-spacing: inherit; word-spacing: initial; </p><h4>6.2. Трекинг: свойство letter-spacing</h4> <p>Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к и word-spacing . В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.</p> <p>Свойство наследуется.</p> <p><b>Синтаксис </b></p><p>Letter-spacing: normal; letter-spacing: 0.1em; letter-spacing: 2px; letter-spacing: inherit; letter-spacing: initial; </p><h3>7. Отступ первой строки: свойство text-indent</h3> <p>Свойство text-indent задает отступ, применяемый к строкам встроенного содержимого в блоке. Отступ обрабатывается как поле, примененное к начальному краю линейного блока.<br> Если в первой строке <a href="/pozicionirovanie-elementov-html-pozicionirovanie-vyravnivanie-blochnyh/">блочного элемента</a> присутствует изображение, то оно сдвинется вместе с остальным текстом.</p> <p>Свойство наследуется.</p> <p><b>Синтаксис </b></p><p>Text-indent: 5mm; text-indent: 20px; text-indent: 5%; text-indent: 2em each-line; text-indent: 2em hanging; text-indent: inherit; text-indent: initial; </p> <p>Свойство text-align-last (<span>не путать с HTML align </span>) определяет, как будет выравниваться последняя строка блока или строка перед принудительным разрывом. Это важно, так как в последней строке абзаца, как правило, не содержится достаточно текста, чтобы заполнить все пространство.</p> <p>В этой статье мы рассмотрим все аспекты, касающиеся свойства text-align-last , в том числе принимаемые значения и поддержку браузерами.</p> <h2>Использование и принимаемые значения</h2> <p>Применять свойство text-align-last просто. Вот фрагмент кода для выравнивания последней строки текста по правому краю:</p> <p>Intro-graph { text-align: justify; // Required for IE and Edge text-align-last: right; }</p> <p>Свойство может принимать семь значений. Вам, вероятно, известны стандартные <a href="/kodirovka-krasnogo-cveta-cveta-css---rgb-znacheniya-html-atributy-dlya-izmeneniya/">значения HTML</a> text align:left , right и center . Они выравнивают текст в последней строке по правому краю, по левому краю и по центру контейнера.</p> <p>Приведенный ниже пример иллюстрирует различия между этими тремя значениями:</p> <p>Посмотреть пример </p> <p>Четвертое значение, justify , выравнивает последнюю строку таким образом, что текст равномерно распределяется по всей ширине контейнера. Это достигается за счет добавления соответствующего количества пробелов между словами. В зависимости от количества текста это свойство можно использовать, чтобы полностью заполнить пространство в последней строке, но при этом не получить слишком <a href="/kak-ubrat-razryv-mezhdu-slovami-ubiraem-bolshie-probely-v-microsoft-word/">большие разрывы</a> между словами.</p> <p>Текст во втором абзаце также распределен по ширине, но так как последняя строка содержит только одно слово, оно располагается слева.</p> <p>Посмотреть пример </p> <p>Выравнивание последней строки текста по левому краю подходит для языков, которые читаются слева направо (<span>LTR </span>), но это будет неправильно для языков RTL . В таких случаях использование значений left или right может вызвать проблемы.</p> <p>К счастью, можно использовать значение start , чтобы выровнять текст по краю, с которого начинается написание и чтение. Это означает, что, установив для свойства text-align-last значение start , вы выровняете текст по левому краю для языков LTR и по правому краю для языков RTL .</p> <p>Также можно использовать значение end , чтобы выровнять текст по противоположному краю от того, с которого начинается написание и чтение. Это будет соответствовать значению right для языков LTR и left для языков RTL .</p> <p>Посмотреть пример </p> <p>Значение по умолчанию для этого свойства auto . В случае его использования текст в последней строке выравнивается в соответствии со значением <a href="/kak-sozdat-tablicu-na-yazyke-html-atributy-i-svoistva-tega/">свойства HTML</a> text align , если только для него не задано значение justify . Иначе текст распределяется по ширине контейнера, только если для свойства text-justify задано значение distribute . В противном случае текст выравнивается по краю, с которого начинается написание и чтение.</p> <h3>Важные замечания</h3> <p>Чтобы text-align-last работало, для свойства text-align должно быть задано значение justify . Но это правило реализовано только в IE и Edge . В Firefox и Chrome свойство работает и без установки для text-align значения justify . В приведенном ниже примере текст должен быть выровнен по правому краю в Edge и IE . В других браузерах последние строки абзацев будут выравниваться в соответствии со значением свойства text-align-last , а остальные строки будут выровнены по правому краю.</p> <p>Посмотреть демо-версию </p> <p>Если мы не задаем для text-align значение align justify HTML , результат выглядит не столь привлекательно. Поэтому вы, вероятнее всего, установите распределение текста по ширине.</p> <p>Свойство работает, даже если в абзаце присутствует принудительный разрыв строки, заданный с помощью тега <br> или чего-то в этом роде. Имейте в виду, что это свойство будет влиять на все последние строки текста внутри указанного элемента, а не только на самую крайнюю. Например, если текст внутри элемента article или div содержит три абзаца, в каждом из них последняя строка будет выравниваться в соответствии со значением свойства text-align-last , заданным для всего родительского элемента.</p> <p>Если нужно выровнять только самую последнюю строку контента, то можно использовать селекторы :last-child или :last-of-type . Возьмите код из приведенной ниже демо-версии в качестве примера:</p> <p>article { text-align: justify; } article p:last-of-type { text-align-last: right; }</p> <p>Он выравнивает последнюю строку последнего абзаца нашей статьи по правому краю. Остальные строки выравниваются на основе значения свойства HTML text align .</p> <p>Посмотреть демо-версию </p> <p>Также можно использовать другие селекторы: :even и :odd , чтобы изменить выравнивание.</p> <p>Иногда абзац может состоять только из одной строки. В этом случае, если вы указали значения и для свойства text-align , и для свойства text-align-last , то последнее свойство будет иметь приоритет.</p> <p>Рассмотрим следующий фрагмент кода:</p> <p>p { text-align: justify; } p:nth-of-type(2) { text-align-last: left; }</p> <p>Если второй абзац имеет только одну строку, то текст будет выравниваться по левому краю, потому что text-align-last будет иметь приоритет. В приведенной ниже демо-версии показан <a href="/dobavlenie-dannyh-cherez-formu-v-mysql-kak-sdelat-zapis-v-bazu-dannyh-mysql/">данный код</a> CSS в действии, а также несколько других <a href="/kak-zadat-razmer-izobrazheniya-v-html-kak-izmenyat-razmery/">примеров HTML</a> align .</p> <p>Посмотреть демо-версию </p> <h3>Поддержка браузерами</h3> <p>Поддержка этого свойства может быть включена с помощью опции «<span>Включить экспериментальные функции веб-платформы </span>» в <a href="/obzor-besplatnoi-versii-google-chrome-versiya-google-chrome-dlya-mac/">Google Chrome</a> и Opera , начиная с версий 35 и 22 соответственно. Оно полностью поддерживается в Chrome 47+ и Opera 34+ .</p> <p>Чтобы использовать это свойство в Firefox , придется добавлять префикс -moz- . Значения start и end не поддерживаются IE . В то же время, Edge полностью поддерживает это свойство. Единственный <a href="/10-populyarnyh-brauzerov-kakoi-brauzer-samyi-bystryi-video-nedostatki-zhe/">популярный браузер</a>, который полностью не поддерживает text-align-last — это Safari .</p> <table class="data browser"><tr class="br"><td>CSS </td> <td colspan="2">Internet Explorer </td> <td>Chrome </td> <td>Opera </td> <td>Safari </td> <td>Firefox </td> <td>Android </td> <td>iOS </td> </tr><tr class="sp"><td>2.1 </td> <td class="warn" title="Internet Explorer до версии 7.0 включительно не поддерживает значение inherit">6.0+ </td> <td class="yes sline">8.0+ </td> <td class="yes">1.0+ </td> <td class="yes">3.5+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> </tr><tr class="sp"><td>3 </td> <td colspan="2" class="no"> </td> <td class="yes">2.0+ </td> <td class="yes">11.6+ </td> <td class="yes">3.1+ </td> <td class="yes">3.6+ </td> <td class="yes">2.1+ </td> <td class="yes">2.0+ </td> </tr></table><h3>Краткая информация</h3> <h3>Версии CSS</h3> <h3>Значения</h3> center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по <a href="/rostelekom-ne-rabotaet-telefon-remont-telefona-rostelekom-prichiny/">той причине</a>, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно <a href="/znachit-skryvayushchie-druzya-vk-kak-uvidet-skrytyh-druzei-vkontakte/">подобный способ</a> выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево. <p>HTML5 CSS2.1 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-align</title> <style> div { border: 1px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ margin-bottom: 5px; /* Отступ снизу */ } #left { text-align: left; } #right { text-align: right; } #center { text-align: center; } .content { width: 75%; /* Ширина слоя */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div id="left"><div class="content">Выравнивание по левому краю</div></div> <div id="center"><div class="content">Выравнивание по центру</div></div> <div id="right"><div class="content">Выравнивание по правому краю</div></div> </body> </html> </p><p>Результат данного примера показан на рис. 1.</p> <p>Рис. 1. Выравнивание текста в браузере Safari</p> <p>Internet Explorer до версии 7.0 включительно несколько иначе трактует <a href="/1-odf-lichnyi-kabinet-podklyuchenie-novyh-kass-a-kak-ya-uznayu-chto/">данный пример</a>, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).</p> <p><img src='https://i2.wp.com/htmlbook.ru/files/images/css/css_text-align_2.png' width="100%" loading=lazy></p> <p>Рис. 2. Выравнивание текста в <a href="/ustanovit-novuyu-versiyu-internet-explorer-obnovlyaem-brauzer-internet-explorer/">браузере Internet</a> Explorer 7</p> <h3>Объектная модель</h3> <p>document.getElementById("elementID ").style.textAlign</p> <h3>Браузеры</h3> <p>IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </article> </div> <div class="full-place" data-place="article_before_social" data-priority="0" style="width: 100%;"></div> <div class="single-share"> <div class="single-share__top"> <div class="single-share__title">Понравилась статья? <span>Поделитесь с друзьями!</span> </div> <a href="#" onClick="window.open('http://www.facebook.com/sharer.php?url=https%3A%2F%2Fmttx.ru%2Fkakie-znacheniya-mozhet-prinimat-svoistvo-text-align-css-svoistva-text-decoration%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share__facebook"> <i class="fa fa-facebook-official"></i> <span>Поделиться в <b>Facebook</b> </span> </a> </div> <div class="single-share__bottom"> <div class="single-share__group"> <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2Fmttx.ru%2Fkakie-znacheniya-mozhet-prinimat-svoistvo-text-align-css-svoistva-text-decoration%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--vk"> <i class="fa fa-vk single-share-links-item__icon"></i> <span class="single-share-links-item__text"></span> </a> <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2Fmttx.ru%2Fkakie-znacheniya-mozhet-prinimat-svoistvo-text-align-css-svoistva-text-decoration%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--tw"> <i class="fa fa-twitter single-share-links-item__icon"></i> <span class="single-share-links-item__text">Twitter</span> </a> </div> <div class="single-share__group"> <a href="#" onclick="window.print();" class="single-share-item single-share-item--print"><i class="fa fa-print single single-share-item__icon"></i><span>распечатать</span> </a> </div> </div> </div> <div class="article-user"> <div class="article-user-item article-user-question"> <div class="article-user-item__title">Была ли эта статья полезной?</div> <div class="article-user-item__bottom"> <div id="js-send-positive-rating" class="article-user-item__button _yes">Да</div> <div class="article-user-item__button _no">Нет</div> </div> </div> <div id="js-success-send-form" class="article-user-item article-user-question _yes _hidden"> <div class="article-user-item__title">Спасибо, за Ваш отзыв!</div> <div class="article-user-item__text"></div> </div> <div id="js-fail-send-form" class="article-user-item _no _hidden"> <div class="article-user-item__title">Что-то пошло не так и Ваш голос не был учтен.</div> </div> <div id="js-negative-rating-form" class="article-user-item article-user-question _no _hidden"> <div class="article-user-item__title">Спасибо. Ваше сообщение отправлено</div> </div> <div class="article-user-item article-user-error"> <div class="article-user-item__title">Нашли в тексте ошибку?</div> <div class="article-user-item__text">Выделите её, нажмите <strong>Ctrl + Enter</strong> и мы всё исправим!</div> </div> </div> <div class="full-place" data-place="article_before_related_articles" data-priority="0" style="width: 100%;"></div> <div class="similar-articles"> <div class="similar-articles__title"> <i class="fa fa-angle-double-left"></i>Похожие советы<i class="fa fa-angle-double-right"></i> </div> <div class="block-row"> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/1dc63577943143c4879b909d64c0645d.jpg" alt="Что означают буквы«мм»: все возможные значения В контакте русская версия" loading=lazy> </div> <a href="/v-kontakte-chto-oznachayut-bukvy-mm-vse-vozmozhnye-znacheniya-v-kontakte/" title="Что означают буквы«мм»: все возможные значения В контакте русская версия" class="similar-articles-block__title"> Что означают буквы«мм»: все возможные значения В контакте русская версия </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/370cb7ff1f7e9bde457c05f9d12bee36.jpg" alt="Электронные самоделки для радиолюбителей и начинающих электриков" loading=lazy> </div> <a href="/kakie-pribory-mozhno-sdelat-svoimi-rukami-elektronnye-samodelki-dlya/" title="Электронные самоделки для радиолюбителей и начинающих электриков" class="similar-articles-block__title"> Электронные самоделки для радиолюбителей и начинающих электриков </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/63f9d484568216eb8915ccb8181a9050.jpg" alt="Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003" loading=lazy> </div> <a href="/sbros-do-zavodskih-nastroek-hard-reset-dlya-telefona-samsung-galaxy-s-sclcd-gt-i9003-samsung/" title="Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003" class="similar-articles-block__title"> Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003 </a> </div> </div> </div> <div class="block-row"> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/54e09bf1f0920d9e135a9e50c00092f5.jpg" alt="Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек" loading=lazy> </div> <a href="/sbros-do-zavodskih-nastroek-hard-reset-dlya-telefona-samsung-galaxy-s-sclcd-gt-i9003-samsung/" title="Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек" class="similar-articles-block__title"> Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/ece27e98c2e58fb06b6f1d2acc2b790f.jpg" alt="Что делать, если телефон сам перезагружается" loading=lazy> </div> <a href="/smartfon-perezagruzhaetsya-pri-zaryadke-chto-delat-esli-telefon-sam/" title="Что делать, если телефон сам перезагружается" class="similar-articles-block__title"> Что делать, если телефон сам перезагружается </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/c277df224897c5ce57d42d69afbaab78.jpg" alt="Телефон Android не включается дальше логотипа (не хочет загружаться)" loading=lazy> </div> <a href="/pochemu-planshet-ne-vklyuchaetsya-android-telefon-android-ne-vklyuchaetsya/" title="Телефон Android не включается дальше логотипа (не хочет загружаться)" class="similar-articles-block__title"> Телефон Android не включается дальше логотипа (не хочет загружаться) </a> </div> </div> </div> </div> <div class="full-place" data-place="article_after_related_articles" data-priority="0" style="width: 100%;"></div> <div class="comments"> <div id="mc-container"></div> </div> </article> <aside class="sidebar hide-on-mobile"> <div class="day-sovet"> <h3 class="day-sovet__hd">Тема дня</h3> <div class="day-sovet__box"> <img src="/uploads/323a0b2e05c870f6aa64024a67f37b43.jpg" alt="Процедура отключения обновления в Mozilla Как убрать обновление фаерфокс" class="day-sovet__image" loading=lazy> <a href="/category/mts/" class="day-sovet__category"> <span>Мтс</span> </a> </div> <a href="/kak-otkatit-firefox-na-predydushchuyu-versiyu-procedura-otklyucheniya/" class="day-sovet__link"> <span>Процедура отключения обновления в Mozilla Как убрать обновление фаерфокс</span> </a> </div> <!-- /next_post --> <div class="vk-widget"> <h3 class="vk-widget__hd">Реклама</h3> <div id="pypase1" style="height:400px;width:298px;" align="center"></div> </div> <div class="popular-articles"> <h3 class="black-hd popular-articles__title">Популярные материалы</h3> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/gadzhety-dlya-windows-10-regulirovka-gromkosti-programmy-dlya/" class=""> <img src="/uploads/8aebb6ca9def8f3e8e5300bcc335bff6.jpg" alt="Программы для настройки звука" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/gadzhety-dlya-windows-10-regulirovka-gromkosti-programmy-dlya/" class="row-gui__link"> <span>Программы для настройки звука</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/televizor-samsung-v-kachestve-monitora-plyusy-i-minusy-ispolzovaniya-televizora-vmesto-monitora-podk/" class=""> <img src="/uploads/a57cdf20117bde438f194dd215a0f75e.jpg" alt="Плюсы и минусы использования телевизора вместо монитора" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/televizor-samsung-v-kachestve-monitora-plyusy-i-minusy-ispolzovaniya-televizora-vmesto-monitora-podk/" class="row-gui__link"> <span>Плюсы и минусы использования телевизора вместо монитора</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/programma-dlya-vyyavleniya-neispravnostei-operativnoi-pamyati-kak-vypolnit/" class=""> <img src="/uploads/1d22d20477bc0866a7ea7e57b6e0554e.jpg" alt="Как выполнить тест оперативной памяти?" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/programma-dlya-vyyavleniya-neispravnostei-operativnoi-pamyati-kak-vypolnit/" class="row-gui__link"> <span>Как выполнить тест оперативной памяти?</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/pervyi-kanal-hd-smotret-onlain-kommentarii-pervyi-kanal-8023/" class=""> <img src="/uploads/159d0d478179616fa22cf8b3fe1760dc.jpg" alt="Комментарии Первый канал (8023) Идет орт" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/pervyi-kanal-hd-smotret-onlain-kommentarii-pervyi-kanal-8023/" class="row-gui__link"> <span>Комментарии Первый канал (8023) Идет орт</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/ustanovka-trikolor-tv-v-shchekino-ustanovka-trikolor-tv-v-shchekino/" class=""> <img src="/uploads/81e27754520e0fa020cee275ba63d5d5.jpg" alt="Установка триколор тв в щекино Установка и подключение" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/ustanovka-trikolor-tv-v-shchekino-ustanovka-trikolor-tv-v-shchekino/" class="row-gui__link"> <span>Установка триколор тв в щекино Установка и подключение</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/interferenciya-solnechnaya-solnechnaya-zasvetka-sputnikovaya-svyaz/" class=""> <img src="/uploads/3764d8ca53a703cf2cf539e95647e3a6.jpg" alt="Интерференция солнечная. Солнечная засветка. Спутниковая связь. Как определить время солнечной интерференции Особенности работы с калькулятором" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/interferenciya-solnechnaya-solnechnaya-zasvetka-sputnikovaya-svyaz/" class="row-gui__link"> <span>Интерференция солнечная. Солнечная засветка. Спутниковая связь. Как определить время солнечной интерференции Особенности работы с калькулятором</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/moya-strana-tele2-opisanie-opisanie-uslugi-moya-strana-ot-tele2-stoimost/" class=""> <img src="/uploads/c54d263909c2977eccda3b3f33e85719.jpg" alt="Описание услуги «Моя страна» от Теле2" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/moya-strana-tele2-opisanie-opisanie-uslugi-moya-strana-ot-tele2-stoimost/" class="row-gui__link"> <span>Описание услуги «Моя страна» от Теле2</span> </a> </div> </div> </div> </div> </aside> </div> <div class="full-place" data-place="article_desktop_fixed" data-priority="0" style="width: 100%;"></div> <footer class="footer"> <div class="footer__wrapper"> <div class="footer__box"> <a href="/" class="footer__logo1"><img src="/logo/logo.png" loading=lazy></a><br> <div class="social-buttons"> <div class="social-buttons-list"> <a href="https://vk.com/share.php?url=https://mttx.ru/kakie-znacheniya-mozhet-prinimat-svoistvo-text-align-css-svoistva-text-decoration/" class="social-buttons-list__item _vk">Vkontakte</a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://mttx.ru/kakie-znacheniya-mozhet-prinimat-svoistvo-text-align-css-svoistva-text-decoration/" class="social-buttons-list__item _fb">Facebook</a> </div> </div> <p class="footer__copyright">© 2024. Энциклопедия мобильной связи</p> </div> <nav class="footer-menu"> <a class="footer-menu__item" href="/category/beeline/">Билайн</a> <a class="footer-menu__item" href="/category/yota/">Йота</a> <a class="footer-menu__item" href="/category/tele2/">Теле2</a> <a class="footer-menu__item" href="/category/mts/">Мтс</a> <a class="footer-menu__item" href="/category/megaphone/">Мегафон</a> </nav> <div class="footer__counters"> </div> </div> </footer> <div class="scroll-up"> <div id="toTop"><span class="up_b"></span>Наверх</div> </div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <script data-rocketsrc="/assets/sovets24-2017/js/app-20171130102046.js" type="text/rocketscript"></script> <script type="text/rocketscript"> if(window.location.hostname.indexOf('hghltd.yandex.net')!=-1){ // hghltd.yandex.net var i; var x = document.getElementsByClassName("direct"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } } (function(H){ H.className=H.className.replace(/\bno-js\b/,'js')} )(document.documentElement); </script> <script type="text/rocketscript"> APP.pages.articleView(); APP.modules.ratingBlock.init(); Engine.article.errorInTextReport(); document.oncopy = Engine.addLinkOnCopy; </script> <script type="text/rocketscript"> var BANNERS = { types: { code: 1, consultant: 6, modal: 9, offer: 7 } } </script> </body> </html>