Как выровнять текст по ширине?
Выравниванием по ширине называется такой способ форматирования текста, когда левый и правый края текста выравниваются по вертикальным линиям (рис. 1).
Рис. 1. Выравнивание текста по ширине
Для выравнивания правого края текста браузер добавляет пустые промежутки между слов, что иногда смотрится неаккуратно.
Чтобы выровнять текст по ширине ему достаточно добавить свойство text-align со значением justify , как показано в примере 1.
Пример 1. Использование text-align
В данном примере мы используем класс text-justify , который при добавлении его к любому элементу выравнивает текст по ширине.
Последняя строка нашего текста по умолчанию остаётся выровненной по левому краю. Для управления поведением последней строки есть отдельное свойство text-align-last. К примеру, значение right выравнивает по правому краю, а center — по центру (пример 2).
Пример 2. Использование text-align-last
См. также
- text-align
- text-align-last
- Свойства текста в CSS
Как растянуть текст на всю ширину блока?
Есть блок (голубой на картинке) и текст. Как этот текст растянуть на весь блок?
- Вопрос задан более трёх лет назад
- 20460 просмотров
1 комментарий
Простой 1 комментарий
SecretBrain @SecretBrain
Как выровнять текст по ширине в html
Выравнивание текста отвечает за его внешний вид, формирование краев абзаца. Обычно текст обрамляют тегами
или и затем применяют css свойство text-align со следующим значением:
- по левому краю — left
- по правому краю — right
- по центру — center
- по ширине — justify
Отличие между абзацем (тег
) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .
Этот текст по умолчанию займет левое вырывание class="center">Пример текста с выравниваем по центру class="right">Пример текста с выравниваем по правому краю class="justify"> Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине Пример текста с выравниваем по ширине
.center text-align: center; > .right text-align: right; > .justify text-align: justify; > Как растянуть текст по ширине блока?
Каким образом можно решить такую задачу? Есть несколько div в которых лежат 2 текстовые строки «p». Текст в эти строки подставляется динамически пользователем при вводе в input. Шрифт у текста в каждом блоке разный. Размер шрифта в первой строке 25px, в нижней 20. Как сделать так, чтобы ширина текста была одинаковой, но при этом font-size второй строки был всегда меньше размера первой? https://gyazo.com/585a1b62e7338b2f8464c989c18661c2
Отслеживать
5,264 1 1 золотой знак 18 18 серебряных знаков 36 36 бронзовых знаков
задан 1 июн 2018 в 12:16
Александр Пикин Александр Пикин
47 2 2 серебряных знака 9 9 бронзовых знаков
А что вы понимаете под шириной текста? За счет чего текст должен становится шире?
1 июн 2018 в 12:32
под шириной понимаю то сколько пикселей занимает в ширину строка, думаю за счет размера текста как то это регулировать, но мне не нравится этот вариант.
1 июн 2018 в 12:40
Никак. Я в первой напишу «ШШШШШШШШШШШШШШШШШ», а во второй «i» — и что ты с этим сделаешь?