Html как выровнять текст по ширине
Перейти к содержимому

Html как выровнять текст по ширине

  • автор:

Как выровнять текст по ширине в html

Аватар пользователя Вячеслав Межуревский

Выравнивание текста отвечает за его внешний вид, формирование краев абзаца. Обычно текст обрамляют тегами <p> или <div> и затем применяют css свойство text-align со следующим значением:

  • по левому краю — left
  • по правому краю — right
  • по центру — center
  • по ширине — justify

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

Как сделать в HTML выравнивание по ширине?

HTML выравнивание по ширине

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

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

Как вы, наверное, уже знаете, при верстке страницы весть текст по умолчанию выравнивается по левому краю, то есть по умолчанию атрибуту align имеет значение «left».

Атрибут align может принимать следующие значения выравнивания:

Текст по всей ширине

Для того, чтобы текст был по всей ширине, я использовал align=»justify». Всё получилось, но появился один баг: в тексте создаются большие пробелы. Как исправить? введите сюда описание изображения

Vadim Ovchinnikov's user avatar

Денис Павлик's user avatar

Используйте знаки переноса &shy; .

Сравните первый вариант (без переноса) и второй (с переносом слов)

введите сюда описание изображения

Crantisz's user avatar

Не обманывайте себя, багом данное действие не является. Это стандартное поведение выравнивания по всей длине ( align=»justify» )

Для примера в MS Word наблюдаются такие же пробелы.
Вот пример: введите сюда описание изображения

Это связано с тем, что если длина слова, перенесенного на новую строку превышает допустимый размер поля, если будет помещена на предыдущую строку, то слово переносится вниз, соответственно та строка, предыдущая, она растягивается по всей длине.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *