9.1 Свойство text-indent
Свойства абзацев в CSS играют ключевую роль в управлении форматированием текста, обеспечивая удобство чтения и эстетическую привлекательность. Среди них text-indent и text-align-last являются важными инструментами для настройки отступов и выравнивания последней строки текста в абзаце.
Свойство text-indent управляет отступом первой строки текста внутри элемента блока. Оно часто используется для создания отступов в начале абзацев, что улучшает читаемость и структуру текста.
Значения:
- Абсолютные значения: значения в фиксированных единицах, таких как пиксели (
px), точки (pt), сантиметры (cm) и т.д. Например,text-indent: 20px; - Процентные значения: значения в процентах от ширины содержащего блока. Например,
text-indent: 5%; - Отрицательные значения: отступы могут быть отрицательными, что приведет к выравниванию текста влево за границы контейнера. Например,
text-indent: -20px;
Пример использования:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Это абзац с отступом первой строки на 20 пикселей.</p>
<p class="indent-5percent">Это абзац с отступом первой строки на 5 процентов от ширины блока.</p>
<p class="indent-negative">Это абзац с отрицательным отступом первой строки на 20 пикселей.</p>
</body>
9.2 Свойство text-align-last
Свойство text-align-last управляет выравниванием последней строки текста внутри элемента блока. Оно полезно для достижения консистентного выравнивания в абзацах, особенно когда текст выравнивается по ширине (justify).
Значения:
auto: последняя строка выравнивается как обычный текст (значение по умолчанию)left: последняя строка выравнивается по левому краюright: последняя строка выравнивается по правому краюcenter: последняя строка центрируетсяjustify: последняя строка выравнивается по ширине, как и остальные строки абзаца
Пример использования:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Это абзац с выравниванием текста по ширине и последней строки по левому краю.</p>
<p class="justify-right">Это абзац с выравниванием текста по ширине и последней строки по правому краю.</p>
<p class="justify-center">Это абзац с выравниванием текста по ширине и последней строки по центру.</p>
<p class="justify-justify">Это абзац с выравниванием текста и последней строки по ширине.</p>
</body>
9.3 Совместное использование свойств
Свойства text-indent и text-align-last могут использоваться вместе для создания более сложного форматирования абзацев, улучшая читаемость и визуальную структуру текста.
Пример HTML и CSS:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Этот абзац имеет отступ первой строки на 30 пикселей, текст выровнен по ширине, а последняя строка выровнена по правому краю.
Это демонстрирует совместное использование свойств text-indent и text-align-last для достижения желаемого эффекта форматирования.
</p>
</body>
Объяснение кода:
text-indent: 30px;: устанавливает отступ первой строки текста на 30 пикселейtext-align: justify;: выравнивает текст по ширине контейнераtext-align-last: right;: выравнивает последнюю строку текста по правому краюwidth: 300px;: устанавливает ширину контейнера для текстаborder: 1px solid #000;: добавляет рамку вокруг контейнера текстаpadding: 10px;: устанавливает внутренние отступы внутри контейнера
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ