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

Редактор Wix: Форматирование текста | Центр Поддержки

Почему нельзя выравнивать текст по ширине, особенно на сайте

Елена Жеребкова

26.06.2015 | | 0 комментариев

Большинство из нас со школьной скамьи имеют четкое представление об идеально оформленной странице. Равномерная россыпь букв, стройные линии слов, строгий, обрамленный ровными полями прямоугольник текста — именно такую картину мы наблюдаем, перелистывая любое печатное издание. Велик соблазн изобразить что-то подобное и на web-странице, тем более что для этого предложено всем известное средство — выравнивание текста по ширине. Однако что хорошо для типографа, то смертный грех для веб-верстальщика. А все потому, что применительно к разметке сайта эта функция обрастает таким количеством недостатков, что ее единственное достоинство в виде ровненького правого края просто меркнет на глазах. Вот лишь несколько причин, по которым стоит отказаться от выравнивания по ширине в пользу выравнивания по левому краю.

Видимый беспорядок внутри текстового блока

Да-да, чем ровнее края текстового блока, тем очевиднее бардак внутри него. В типографском деле стройности текста позволяет добиться целый арсенал инструментов: переносы, регулировка интервалов между словами и расстояний между буквами и даже чуть более широкие или чуть более узкие варианты шрифта. А вот макет интернет-страницы предполагает, как правило, только один способ «растянуть» строку от края до края — неконтролируемое увеличение ширины пробелов. Мало того, что это приводит к появлению неприглядных зазоров между словами, так эти зазоры, словно по закону подлости, частенько приходятся примерно на одно и то же место в каждой строке, образуя так называемые вертикальные «реки». Все это придает тексту весьма неопрятный вид.

Нечитабельность

Но если эстетикой еще можно было бы пожертвовать ради аккуратных краев, то вот очевидные проблемы с визуальным восприятием текста — все-таки слишком высокая плата за них. А выровненный по ширине текст объективно гораздо менее читабелен, чем выровненный по левому краю. Главная причина кроется все в тех же увеличенных интервалах между словами: глаз постоянно вынужден выискивать начало следующего слова, а из-за разности пробелов от строки к строке еще и перестраиваться с одного расстояния на другое.

Необходимость работать над длиной строки, зачастую безрезультатно

Справедливости ради стоит отметить, что обозначенные недостатки выровненного текста могут быть уменьшены за счет увеличения длины строки. Однако далеко не всегда этот метод будет эффективен. А вот снизить читаемость он может с очень большой долей вероятности: глазам трудно, просканировав до конца одну длинную строчку, точно и быстро перескочить на начало следующей.

Неприспособленность под мобильные устройства

Чем уже колонка с текстом, тем в меньшей степени он подлежит выравниванию по ширине. И здесь такой формат вступает в прямое противоречие с требованиями мобильных устройств, для которых, наоборот, чем короче строка, тем лучше. Согласитесь, одно дело следить взглядом за длинной строчкой на полноэкранном мониторе, и совсем другое — раз за разом прокручивать каждую строку назад и вперед. Сомнительное удовольствие, зато верный способ растерять мобильную аудиторию!

Казалось бы, стоит добавить на страницу функцию переноса слов, и все эти проблемы, возникающие при выравнивании текста по ширине страницы, были бы решены. Но в том-то и загвоздка, что HTML-разметка такой функции не предполагает. Вот и получается, что на сегодняшний день никакого другого способа сохранить допустимые интервалы между словами на web-странице, кроме как выравнивание текста по краю, не существует.

Таким образом, при создании интернет-страницы важно помнить главное: web-сайт — это не книга, и подходить к его оформлению нужно с тех позиций, которые диктуют технологии и психология воприятия, а не чьи-то эстетические воззрения, впрочем, весьма и весьма условные. Поверьте, если ваш текст будет аккуратно размещен и, в первую очередь, легко и с удовольствие читаем, никто и внимания не обратит на такую мелочь, как неровность полей!

Кстати, когда вы читали эту статью, вы обратили внимание на то, что текст не выровнен по ширине?

выравнивание по тексту | Коддропс

Свойство text-align описывает, как выравнивается содержимое встроенного уровня (например, текст или изображения) внутри элемента уровня блока.

Несмотря на то, что в свойстве указано «текстовое» выравнивание, оно влияет на все элементы внутри блочного элемента, которые являются либо встроенными, либо встроенными блочными элементами.

Свойство влияет только на содержимое внутри элемента, к которому оно применяется, а не на сам элемент. Чтобы центрировать сам элемент, 9Можно использовать свойство 0003 margin .

Значения свойства text-align выравнивают содержимое элемента по отношению к самому элементу, а не к области просмотра.

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

Общая информация и заметки

Если вы новичок в CSS и знакомы с редакторами WYSIWYG, вам может быть полезно узнать, что значения

Значения

пуск

То же, что влево если направление слева-направо и вправо если направление справа-налево.

конец

То же, что вправо если направление слева направо и влево если направление справа налево.

осталось

Содержимое встроенного уровня выравнивается по левому краю строки.

справа

Содержимое встроенного уровня выравнивается по правому краю строки.
г>

центр

Встроенное содержимое располагается по центру (горизонтально) внутри строки строки.

оправдать

Текст выравнивается в соответствии с методом, заданным свойством text-justify .

Браузер регулирует расстояние между словами так, чтобы встроенное содержимое точно заполнило всю строку от левого края элемента до его правого края.

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

унаследовать

Элемент наследует то же выравнивание, что и его родитель.

совпадение-родитель

Это значение ведет себя так же, как наследует (вычисляет по расчетному значению его родителя), за исключением того, что унаследованное ключевое слово старта или End интерпретируется по значению его родителя и приводит к вычисленному значению Left или справа .

Начальный конец (экспериментальный, не поддерживается)

Указывает

start выравнивание первой строки и любой строки сразу после принудительного разрыва строки; и end выравнивание любых оставшихся строк.

(экспериментальный, не поддерживается)

Вместо выравнивания встроенного содержимого по краям элемента оно выравнивается относительно указанной строки из одного символа. Строка используется в сочетании с другим значением, указанным сразу после нее (например, start ). Значение, указанное после строки из одного символа, определяет выравнивание содержимого по отношению к этой строке. Например, числовое содержимое может быть выровнено относительно десятичной точки.

Примеры

В следующем примере все встроенные элементы уровня центрируются внутри div , которые имеют класс Important .

div.важно {
    выравнивание текста: по центру;
}