Какое свойство выравнивает текст в элементе

Какое свойство выравнивает текст в элементе thumbnail

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

Табл. 1. Способы выравнивания текста

Выравнивание по левому краюВыравнивание по правому краюВыравнивание по центруВыравнивание по ширине
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег абзаца <p>
с атрибутом align, который определяет способ выравнивания.
Также блок текста допустимо выравнивать с помощью тега <div>
с аналогичным атрибутом align, как показано в
табл. 2.

Табл. 2. Выравнивание текста с помощью параметра align

Код HTMLОписание
<p>Текст</p>Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед
абзацем и после него автоматически добавляются небольшие вертикальные
отступы.
<p align=”center”>Текст</p>Выравнивание по центру.
<p align=”left”>Текст</p>Выравнивание по левому краю.
<p align=”right”>Текст</p>Выравнивание по правому краю.
<p align=”justify”>Текст</p>Выравнивание по ширине.
<nobr>Текст</nobr>Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст<wbr>Разрешает браузеру делать перенос строки в указанном месте, даже если
используется тег <nobr>.
<div align=”center”>Текст</div>Выравнивание по центру.
<div align=”left”>Текст</div>Выравнивание по левому краю.
<div align=”right”>Текст</div>Выравнивание по правому краю.
<div align=”justify”>Текст</div>Выравнивание по ширине.

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

Отличие между абзацем (тег <p>) и тегом <div>
в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет
в случае использования тега <div>.

Атрибут align достаточно универсален и может
применяться не только к основному тексту, но и к заголовкам вроде <h1>.
В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “https://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Выравнивание текста</title>
</head>
<body>
<h1 align=”center”>Как поймать льва?</h1>
<p align=”right”><strong>Метод перебора</strong></p>
<p>Делим пустыню на ряд элементарных участков, размер которых совпадает
с габаритными размерами льва, но при этом меньше размера клетки. Далее простым
перебором определяем участок, в котором находится лев, что автоматически приводит
к его поимке.</p>
<p align=”right”><strong>Метод дихотомии</strong></p>
<p>Делим пустыню на две половины. В одной части – лев, в другой его нет.
Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем
до тех пор, пока лев не окажется пойман.</p>
</body>
</html>

Результат примера показан на рис. 1.

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

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

В данном примере выравнивание заголовка происходит по центру окна браузера,
выделенного абзаца по правому краю, а основного текста — по левому краю.

Источник

Какое свойство выравнивает текст в элементе

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

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

Читайте также:  Каков состав нефти какие физические свойства компонентов нефти лежат в основе ее перегонки

CSS построен на Unicode.

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

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

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

text-transform
Значения:
noneЗначение по умолчанию, означает отсутствие эффектов.
capitalizeИзменяет написание первой буквы каждого слова в элементе, делая её прописной.
uppercaseВыводит все слова в элементе прописными буквами.
lowercaseВыводит все слова в элементе строчными буквами.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

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

Работает только для элементов <textarea> и <pre>, для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.

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

tab-size
Значения:
целое числоЛюбое целое положительное число. По умолчанию табуляция делает отступ, равный восьми пробелам.
длинаЗначение отступа, указываемое в единицах длины, например, рх.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

tab-size: 0;
tab-size: 10px;
tab-size: inherit;
tab-size: initial;

4. Разрыв строки и границы слов

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

Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега <br>, начала или конца блока — это принудительный разрыв строки.

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

4.1. Правила разрыва для букв: свойство word-break

Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.

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

word-break
Значения:
normalСлова разрываются в соответствии с их обычными правилами. Значение по умолчанию.
break-allРазрыв допускается в пределах слов. Перенос слов не применяется.
keep-allЗапрещает разрывы между парами символов.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: inherit;
word-break: initial;

4.2. Разрыв строки: line-break

Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.

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

line-break
Значения:
autoБраузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию.
looseРазбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах.
normalРазбивает текст, используя наиболее распространенный набор правил переноса строк.
strictРазбивает текст, используя строгий набор правил переноса строк.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.
Читайте также:  Какой четырехугольник называется прямоугольником особое свойство

Синтаксис

line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: inherit;
line-break: initial;

4.3. Расстановка переносов: свойство hyphens

Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.

Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.

CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.

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

hyphens
Значения:
noneСлова не переносятся, даже если символы внутри слова явно определяют возможности переноса.
manualСлова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ ­). Значение по умолчанию.
autoСлова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: inherit;
hyphens: initial;

4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

Свойство overflow-wrap (или его устаревшее имя word-wrap) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.

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

overflow-wrap, word-wrap
Значения:
normalНеразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию.
break-word
anywhereНеразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow-wrap: inherit;
overflow-wrap: initial;

5. Выравнивание и выключка строк

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

5.1. Краткая запись для выравнивания текста: свойство text-align

Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent, присваиваются text-align-all и сбрасываются в text-align-last на auto.

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

text-align
Значения:
startСодержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию.
endСодержимое на уровне строки выравнивается по конечному краю линейного блока.
leftСодержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
rightСодержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
centerСодержимое на уровне строки центрируется внутри линейного блока.
justifyТекст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last, последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
justify-allУстанавливает text-align-all и text-align-last в justify, также выравнивая последнюю строку.
match-parentЗначение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right.
inheritНаследует значение свойства от родительского элемента.
Читайте также:  Какими полезными свойствами обладает иван чай

Синтаксис

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;

5.2. Выравнивание текста по умолчанию: свойство text-align-all

Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last. Принимает значения start, end, left, right, center, justify и match-parent.

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

Синтаксис

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;

5.3. Выравнивание последней строки: свойство text-align-last

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

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

Принимает значения auto, start, end, left, right, center, justify и match-parent.

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

Синтаксис

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;

6. Промежутки

CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing.

6.1. Промежутки между словами: свойство word-spacing

Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

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

word-spacing
Значения:
normalДополнительный интервал не применяется. Вычисляет в 0. Значение по умолчанию.
длинаЗадает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

word-spacing: normal;
word-spacing: 1px;
word-spacing: 0.2em;
word-spacing: 1rem;
word-spacing: inherit;
word-spacing: initial;

6.2. Трекинг: свойство letter-spacing

Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к кернингу и word-spacing. В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.

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

letter-spacing
Значения:
normalДополнительный интервал не применяется. Вычисляет в 0. Значение по умолчанию.
длинаОпределяет дополнительный интервал между типографскими символами. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: 2px;
letter-spacing: inherit;
letter-spacing: initial;

7. Отступ первой строки: свойство text-indent

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

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

text-indent
Значение:
длина/%Размер отступа в виде абсолютной длины. Процентное значение вычисляется от собственной логической ширины блока-контейнера. Значение по умолчанию 0.
each-lineОтступы затрагивают первую строку каждого блока-контейнера и каждую строку после принудительного разрыва строки (но не строки после с мягким переносом).
hangingОбратное преобразование. Все строки, кроме первой, будут с отступом.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

text-indent: 5mm;
text-indent: 20px;
text-indent: 5%;
text-indent: 2em each-line;
text-indent: 2em hanging;
text-indent: inherit;
text-indent: initial;

По материалам CSS Text Module Level 3

Источник