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

Выравниванием по ширине называется такой способ форматирования текста, когда левый и правый края текста выравниваются по вертикальным линиям (рис. 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

Выравнивание текста

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

Для установки выравнивания текста обычно используется тег параграфа

с атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега с аналогичным атрибутом align . Он может принимать следующие значения:

• left — выравнивание по левому краю, задается по умолчанию;
• right — выравнивание по правому краю;
• center — выравнивание по центру;
• justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.

Атрибут align можно применять как для текста, так и для заголовков (пример 7.4).

Пример 7.4. Способы выравнивания текста

      
Как поймать льва?
 
Метод перебора
 
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
 
Метод дихотомии
 
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
  

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

Рис. 7.4. Вид текста при его выравнивании

Как сделать ограничение переноса текста с нижнего блока, относительно ширины верхнего?

Как сделать ограничение переноса текста с нижнего блока, относительно ширины верхнего?

body < margin: 0; font-family: Abel, sans-serif; font-size: 20px; color: 181a1f; background-color: #17191e >*, *:before, *:after < box-sizing: border-box; >h1,h2,h3,h4,h5,h6 < margin: 0; >/* Container */ .container < width: 100%; max-width: 1170px; margin: 0 auto; >/* Header */ .header_logo < margin-top: 43px; >/* Intro */ .intro < width: 100%; height: 100vh; >.intro_inner < >.intro_title < line-height: 1 ; margin-top: 200px; font-size: 176px; color: #ffdb00; text-transform: uppercase; font-weight: normal; >.intro_text

         
 
 
 
  
 
 
 
 
 
 
wake the design
 
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.
 
 
 
   

Отслеживать
задан 10 сен 2020 в 17:35
1 1 1 бронзовый знак

Уменьшить ширину контейнера, используя max-width , также нужно несколько @media (max-width: ?) сделать, чтобы на разной ширине экрана тоже всё подкрутить

10 сен 2020 в 17:53

@МихаилКамахин неправильно нарисовал, все элементы и так находятся в фиксированном контейнере и не выходят за него, я хочу чтобы блок с текстом и текст внутри него был по ширине верхнего блока с заголовком, а блок заголовка ограничивался текстом внутри него. То есть вот так: imgur.com/a/w9Xs4I2

10 сен 2020 в 18:06

Да, я и говорю, уменьшите ширину контейнера, в котором находятся эти два элемента: большой текст и маленький текст

10 сен 2020 в 19:47
@Kurokkasu оберните header и intro в один блок
10 сен 2020 в 19:56

1 ответ 1

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

Можно ограничить ширину блока, ширину текста в h1 и настроить несколько медиа-запросов

body < margin: 0; font-family: Abel, sans-serif; font-size: 20px; color: 181a1f; background-color: #17191e >*, *:before, *:after < box-sizing: border-box; >h1,h2,h3,h4,h5,h6 < margin: 0; >/* Container */ .container < width: 100%; max-width: 1170px; margin: 0 auto; >/* Header */ .header_logo < margin-top: 43px; >/* Intro */ .intro < width: 100%; height: 100vh; >.intro_inner < width: 100%; >.intro_title < line-height: 1 ; margin-top: 200px; font-size: 176px; color: #ffdb00; text-transform: uppercase; font-weight: normal; >.intro_text < width: 100%; max-width: 700px; text-align: left; margin-top: 50px; color: #fff; >@media only screen and (max-width:1200px) < .intro_inner < padding: 0 10px; >> @media only screen and (max-width: 718px) < .intro_inner < display: flex; flex-direction: column; align-items: center; >.intro_title < max-width: 500px; >> @media only screen and (max-width: 520px) < .intro_title < font-size: 32.7vw; >>

         
 
 
 
  
 
 
 
 
 
 
wake the design
 
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.
 
 
 
   

text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Синтаксис

text-overflow: clip | ellipsis

Значения

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

HTML5 CSS3 IE Cr Op Sa Fx

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

Рис. 1. Многоточие в конце текста

Браузеры

Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .