Вирівнюванням по ширині називається такий спосіб форматування тексту, коли лівий та правий краї тексту вирівнюються по вертикальних лініях (рис. 1).
Мал. 1. Вирівнювання тексту за шириною
Для вирівнювання правого краю тексту браузер додає порожні проміжки між словами, що іноді виглядає неакуратно.
Щоб вирівняти текст за шириною, йому достатньо додати властивість text-align зі значенням justify, як показано в прикладі 1.
Приклад 1. Використання text-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вирівнювання тексту</title> <style> .text-justify {text-align: justify; /* Вирівнювання за шириною */
}
</style>
</head>
<body> <p class="text-justify">Навіть якщо врахувати розріджений газ, що заповнює простір між зірками, все одно пряме сходження шукає далекий афелій. Звичайно, не можна не зважати на той факт, що секстант ілюструє випадковий маятник Фуко.</p>
</body>
</html>У цьому прикладі ми використовуємо клас text-justify, який при додаванні його до будь-якого елементу вирівнює текст за шириною.
p>Останній рядок нашого тексту за замовчуванням залишається вирівняним по лівому краю. Для керування поведінкою останнього рядка є окрема властивість text-align-last. Наприклад, значення right вирівнює праворуч, а center — по центру (приклад 2).
Приклад 2. Використання text-align-last
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вирівнювання тексту</title> <style> .text-justify {text-align: justify; /* Вирівнювання за шириною */
text-align-last: center; /* Вирівнювання останнього рядка */
}
</style>
</head>
<body> <p class="text-justify">Навіть якщо врахувати розріджений газ, що заповнює простір між зірками, все одно пряме сходження шукає далекий афелій. Звичайно, не можна не зважати на той факт, що секстант ілюструє випадковий маятник Фуко.</p>
</body>
</html>