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

• none - текст пишется без изменений;
• capitalize - каждое слово будет начинаться с заглавного символа;
• lowercase - все символы становятся строчными (нижний регистр);
• uppercase - все символы становятся прописными (верхний регистр).

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

H1 {text-transform: uppercase;}

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

Украшение текста: свойство text-decoration

Свойство text-decoration позволяет задать тексту дополнительное оформление. Значениями данного свойства являются константы none, underline, overline, line-through и blink , позволяющие отобразить обычный текст, провести линию над, под или через текст, а также сделать текст мигающим. Пример использования различных значений данного свойства приведен на рисунке 11.4 .

Рис. 11.4.

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

A:link {text-decoration: underline;}

Интервал между словами: свойство word-spacing

Чтобы задать интервал между словами в тексте, используется свойство word-spacing . Значения данного свойства можно задать с помощью ключевого слова normal , которое используется по умолчанию и задает стандартный интервал для текущего шрифта. Для задания интервала в дополнение к стандартному можно указать значение в любых доступных единицах CSS, причем значение может быть и отрицательным.

Так, следующее правило увеличивает интервал между словами в заголовке H1 на 1em :

H1 {word-spacing: 1em;}

Выравнивание текста: свойство text-align

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

Следующее правило устанавливает выравнивание по центру всех элементов, содержащихся в элементе DIV :

DIV {text-align: center;}

Интерлиньяж: свойство line-height

Интерлиньяжем называется расстояние между базовыми линиями близких друг к другу строк. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и автоматически определяется браузером. Но это значение может быть изменено с помощью свойства line-height . Заданное по умолчанию значение normal заставляет браузер вычислять расстояние между строками автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. В качестве значений данного свойства допустимо также использовать любые единицы длины, принятые в CSS. Разрешается также использовать процентную запись, причем в этом случае за 100% принимается высота шрифта. Отрицательное значение межстрочного расстояния не допускается.

Интервал между буквами: свойство letter-spacing

Браузер автоматически подбирает интервалы между символами, исходя из размера и типа шрифта. В некоторых случаях необходимо подкорректировать расстояние между буквами. Для управления межбуквенным интервалом используется свойство letter-spacing . В качестве значений данного свойства могут использоваться любые единицы длины, принятые в CSS, однако рекомендуется использовать относительные единицы, основанные на размере шрифта (em и ех). В отличие от межстрочного интервала, свойство letter-spacing допускает использование отрицательного значения, однако в этом случае надо убедиться, что сохраняется читабельность текста.

Следующее правило увеличивает интервал между символами в заголовке H1 на 0.5em .

Модуль 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	Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap	Запрещает переносы строк, за исключением применения .
pre	Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
pre-wrap	Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
pre-line	Удаляет лишние пробелы, за исключением случаев .
break-spaces	Поведение идентично pre-wrap , за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами.
initial
inherit

Синтаксис

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>Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.</p> <p>Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега <br> , начала или конца блока — это принудительный разрыв строки.</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>Наследует значение свойства от <a href="/manipulyacii-s-dom-na-chistom-javascript-tehniki-raboty-s-dom.html">родительского элемента</a>. </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="/specialnye-simvoly-windows-kak-vvodit-simvoly-otsutstvuyushchie.html">специальный символ</a> -). Значение по умолчанию. </td> </tr><tr><td> auto </td> <td>Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов. </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-otklyuchit-ispolzovanie-proksi-servera-pochemu-ne-rabotaet-proxy-i-kak-eto.html">Разные браузеры</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> Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом.</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>Задаёт выравнивание последней строки блока текста.</p><h2>Краткая информация</h2><h2>Обозначения</h2><table><tbody><tr><th> </th><th>Описание </th><th style="width: 130px">Пример </th> </tr><tr><td><тип> </td><td>Указывает тип значения. </td><td><размер> </td> </tr><tr><td>A && B </td><td>Значения должны выводиться в указанном порядке. </td><td><размер> && <цвет> </td> </tr><tr><td>A | B </td><td>Указывает, что надо выбрать только одно значение из предложенных (A или B). </td><td>normal | small-caps </td> </tr><tr><td>A || B </td><td>Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. </td><td>width || count </td> </tr><tr><td> </td><td>Группирует значения. </td><td>[ crop || cross ] </td> </tr><tr><td>* </td><td>Повторять ноль или больше раз. </td><td>[,<время>]* </td> </tr><tr><td>+ </td><td>Повторять один или больше раз. </td><td><число>+ </td> </tr><tr><td>? </td><td>Указанный тип, слово или группа не является обязательным. </td><td>inset? </td> </tr><tr><td>{A, B} </td><td>Повторять не менее A, но не более B раз. </td><td><радиус>{1,4} </td> </tr><tr><td># </td><td>Повторять один или больше раз через запятую. </td><td><время># </td> </tr></tbody></table>× <h2>Значения</h2><p>auto Совпадает с выравниванием, заданным свойством text-align , за исключением значения justify . Для него выравнивание будет как start . start Строка выравнивается по начальному краю блока, который может меняться в зависимости от направления текста (слева направо или справа налево). end Строка выравнивается по конечному краю блока, он определяется направлением текста. left Строка выравнивается по левому краю. right Строка выравнивается по правому краю. center Строка выравнивается по центру. justify Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю. </p><p>Влияние <a href="/temno-oranzhevyi-cvet-kod-cvet-v-stilyah-mozhno-zadavat-raznymi.html">разных значений</a> на положение текста показано в табл. 1.</p><table class="data"> Табл. 1. Влияние значений text-align-last <tr><th>Значение </th><th>Выравнивание </th><th>Вид текста </th> </tr><tr><td class="sel">left </td><td>По левому краю </td><td> </td> </tr><tr><td class="sel"> right </td><td>По правому краю </td><td><img src='https://i1.wp.com/webref.ru/assets/images/css/css_text-align-last_2.png' height="127" width="161" loading=lazy></td> </tr><tr><td class="sel">center </td><td>По центру </td><td><img src='https://i2.wp.com/webref.ru/assets/images/css/css_text-align-last_3.png' height="127" width="161" loading=lazy></td> </tr><tr><td class="sel">justify </td><td>По ширине </td><td><img src='https://i2.wp.com/webref.ru/assets/images/css/css_text-align-last_4.png' height="127" width="161" loading=lazy></td> </tr></table><h2>Песочница</h2><p>Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.</p><p>div { text-align-last: start ; }</p><h2>Пример</h2><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-align-last</title> <style> div { width: 300px; text-align: justify; text-align-last: justify; } </style> </head> <body> <div> При переходе через горы опирайся на долину; располагайся на высотах, смотря, где солнечная сторона. При бое с противником, находящимся на возвышенности, не иди прямо вверх. Таково расположение войска в горах. </div> </body> </html></p><h2>Объектная модель</h2><p><i>Объект </i>.style.textAlignLast</p><h2>Примечание</h2><p><a href="/ne-otkryvayutsya-pdf-v-internet-explorer-brauzer-ne-otkryvaet-pdf-dokumenty.html">Internet Explorer</a> и Edge не поддерживают значения start и end .</p><p>Firefox до версии 49 поддерживает свойство -moz-text-align-last .</p><h2>Спецификация</h2><p>Каждая спецификация проходит несколько стадий одобрения.</p><ul><li>Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.</li><li>Candidate Recommendation (<span>Возможная рекомендация </span>) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.</li><li>Proposed Recommendation (<span>Предлагаемая рекомендация </span>) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.</li><li>Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.</li><li>Editor"s draft (<span>Редакторский черновик </span>) - черновая версия стандарта после внесения правок редакторами проекта.</li><li>Draft (<span>Черновик спецификации </span>) - первая черновая версия стандарта.</li> </ul>× <p><b>HTML теги, определяющие выравнивание текста, отступ </b></p> <p><b>Выровненный по ширине текст используется в типографии </b></p> <p>В примере ниже показано, как выровнить <b>текст по ширине </b> страницы:</p> <table class="t_align" cellspacing="2"><tr><th> align="left" </th> <th> align="right" </th> </tr><tr><td> </td> <td><p>С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.</p> </td> </tr><tr><th> align="justify" </th> <th> align="center" </th> </tr><tr><td><p>С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.</p> </td> <td><p>С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.</p> </td> </tr></table><p>Значение justify обеспечивает равномерное <b>выравнивание текста справа и слева </b>, то есть <b>по ширине </b>. Такой метод широко используется в печати.</p> <h2>Выравнивание текста в HTML по центру и по ширине</h2> <p><b>Выравнивание текста в HTML по центру, текст справа </b>:</p> <p>Результат:</p> <p>Атрибуты и значения</p> <ul><li>align="left" - определяет <i>выравнивание текста слева </i> (по умолчанию).</li> <li>align="center" - <i>выравнивает текст по центру </i>.</li> <li>align="right" - <i>выравнивает текст справа </i>.</li> </ul><h2>Выравнивание | HTML отступ текста</h2> <p><b><a href="/vse-pro-css-vyravnivanie-kak-v-html-sdelat-vyravnivanie.html">HTML текст</a> и его отступ слева страницы </b></p> <p>Произведем <b>отступ текста </b> слева двумя способами:</p> <p>Результат:</p> <p><img src='https://i1.wp.com/ab-w.net/images/501pr.png' width="100%" loading=lazy></p> <p>Посмотреть в новом окне.</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 Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом <a href="/nevernoe-kolichestvo-kategorii-v-ishodnoi-stroke-1s-novye-funkcii-raboty-so.html">новую строку</a> и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. 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="/chem-otlichaetsya-poluchenie-informacii-ot-polucheniya-soobshcheniya.html">данный пример</a>, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/css/css_text-align_2.png' width="100%" loading=lazy></p> <p>Рис. 2. Выравнивание текста в <a href="/individualnaya-nastroika-internet-explorer-inet-est-no-brauzer-ne.html">браузере Internet</a> Explorer 7</p> <h3>Объектная модель</h3> <p>document.getElementById("elementID ").style.textAlign</p> <h3>Браузеры</h3> <p>IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.</p> <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> </div> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> </div> </div> </div> </div> </article> <script type="text/javascript"> try { var sbmt = document.getElementById('submit'), npt = document.createElement('input'), d = new Date(), __ksinit = function() { sbmt.parentNode.insertBefore(npt, sbmt); }; npt.value = d.getUTCDate() + '' + (d.getUTCMonth() + 1) + 'uniq9065'; npt.name = 'ksbn_code'; npt.type = 'hidden'; sbmt.onmousedown = __ksinit; sbmt.onkeypress = __ksinit; } catch (e) {} </script> <div class="td-sub-footer-container td-container-wrap "> <div class="td-container "> <div class="td-pb-row "> <div class="td-pb-span td-sub-footer-menu "></div> <div class="td-pb-span td-sub-footer-copy "> © 2024 bar812.ru. Просто о сложном. Программы. Железо. Интернет. Windows</div> </div> </div> </div> </div> <script data-cfasync="false" type="text/javascript"> if (window.addthis_product === undefined) { window.addthis_product = "wpwt"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpwt-3.1.2"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.9.1"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = { "data_track_clickback": true, "ui_language": "ru", "ui_atversion": "300" }; } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = { "info_status": "enabled", "cms_name": "WordPress", "plugin_name": "Website Tools by AddThis", "plugin_version": "3.1.2", "plugin_mode": "AddThis", "anonymous_profile_id": "wp-f2d21fd70bfc0c32605b4e5e1e4ff912", "page_info": { "template": "posts", "post_type": "" }, "sharing_enabled_on_post_via_metabox": false }; } (function() { var first_load_interval_id = setInterval(function() { if (typeof window.addthis !== 'undefined') { window.clearInterval(first_load_interval_id); if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) { window.addthis.layers(window.addthis_layers); } if (Array.isArray(window.addthis_layers_tools)) { for (i = 0; i < window.addthis_layers_tools.length; i++) { window.addthis.layers(window.addthis_layers_tools[i]); } } } }, 1000) }()); </script> <script type='text/javascript'> var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; </script> <script type='text/javascript' src='https://bar812.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=bbebb9a04042e1d7d3625bab0b5e9e4f'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> <div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar"> <header> <a title="Editor" class="tdw-tab tdc-tab-active" href="#" data-tab-content="tdw-tab-editor">Edit with Live CSS</a> <div class="tdw-less-info" title="This will be red when errors are detected in your CSS and LESS"></div> </header> <div class="tdw-content"> <div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active"> <script> (function(jQuery, undefined) { jQuery(window).ready(function() { if ('undefined' !== typeof tdcAdminIFrameUI) { var $liveIframe = tdcAdminIFrameUI.getLiveIframe(); if ($liveIframe.length) { $liveIframe.load(function() { $liveIframe.contents().find('body').append('<textarea class="tdw-css-writer-editor" style="display: none">'); }); } } }); })(jQuery);