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;: задає внутрішні відступи всередині контейнера
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ