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

Как выровнять текст одновременно по правому и левому краю?

Для выравнивания текста в блоке, например абзаце, применяется стилевое свойство text-align . Его значение justify и устанавливает выравнивание текста по ширине, т.е. сразу по левому и правому краю текстового блока (пример 1).

Пример 1. Выравнивание по ширине

       
JPEG (Joint Photographic Experts Group) - популярный формат графических файлов, широко применямый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные.
  

Результат примера показан на рис. 1.

Рис. 1. Текст, выровненный одновременно по правому и левому краю

В данном примере свойство text-align применяется к селектору P , что заставляет весь текст в абзацах выравниваться по ширине. Учтите, что при таком способе выравнивания, скорее всего, появятся большие промежутки между словами в предложении.

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

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

Я начала учиться создавать сайт. Дошла до написания статей. Не могу выровнять в текстовом редакторе сайта текст по ширине страницы. Иконки по выравниванию текста по ширине страницы нет. Сочетания клавиш Ctrl+J и Ctrl+Alt+J не изменяют положение текста. Вы можете мне помочь решить эту проблему?

Дело в том, что на сайтах не принято использовать выравнивание текста по ширине, комфортным для чтения считается выравнивание по левому краю, в этом случае расстояние между словами одинаковое и выглядит более красиво (кроме того, не возникает проблем с отображением на разных разрешениях).

Но если вам принципиально использовать выравнивание по ширине, то вы можете использовать сочетание клавиш «Alt + Shift + J» (актуально для WordPress, для других CMS не проверял)
или прейти в режим редактирования исходного кода и использовать html-теги в таком виде:

align=″justify″>Текст

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

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

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

Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
задан 22 дек 2016 в 6:49
Денис Павлик Денис Павлик
475 1 1 золотой знак 4 4 серебряных знака 11 11 бронзовых знаков

это не баг, это правильное выполнение свойства align=’justify’. Чтобы не было больших пробелов — нужно использовать выравнивание по какому-либо краю.

22 дек 2016 в 6:52

В Microsoft Word ведь подобных пробелов не наблюдается. Вероятно, что в HTML есть способ их устранения.

22 дек 2016 в 6:55

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

22 дек 2016 в 6:56

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
Lorem ipsum dolor sit amet, con­secte­tur adip­isi­ci­ng elit.

Отслеживать
ответ дан 22 дек 2016 в 11:05
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

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

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

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

Как вариант решения вам нужно либо:

1. Сделать выравнивание по краю
2. Подгонять текст под размер допустимого поля (если текст статический)
3. Подгонять размер поля под текст (также если текст статический)
4. Смириться (да, это тоже как вариант)

Отслеживать
ответ дан 22 дек 2016 в 7:04
1,435 10 10 серебряных знаков 16 16 бронзовых знаков

Я хотел попробовать разбивать длинные слова и переносить их на новую строку, используя свойство hyphens, но почему-то ничего не происходит.

22 дек 2016 в 7:12

@ДенисПавлик на сколько я знаю в актуальных версиях браузеров данные свойства не поддерживаются. Можете попробовать воспользоваться готовым решением github.com/mnater/hyphenator

22 дек 2016 в 7:17

Если смириться, как это предлагает предыдущий оратор, не вариант — есть способ немного облегчить визуальные страдания. Добиться эффекта улучшения можно при помощи отрицательного word-spacing . Для достижения более-менее приемлемого эффекта со значением придется экспериментировать.

.text, .text-alt < text-align: justify; width: 400px; >.text-alt

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus a tempore dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio aut repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, ut consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga. Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus a tempore dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio aut repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, ut consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga. Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.

Первый блок текста — обычный джастифай, второй — с отрицательным ворд-спейсин.

Свойство text-align

Свойство text-align устанавливает выравнивание текста: по левому краю, по правому, по центру, по левому и правому краям одновременно.

Синтаксис

Значения

Значение по умолчанию: auto . В большинстве случаев по умолчанию текст выровнен по левому краю (в арабском языке — по правому). Однако, есть исключения, например, текст в th будет выровнен по центру.