white-space

Свойство white-space указывает браузеру, как обрабатывать пробелы в тексте.

        
          
          <nav>  <ul>    <li><a href="/about">О команде</a></li>    <li><a href="/projects">Наши проекты</a></li>    <li><a href="/contact-us">Связаться с нами</a></li>    <li><a href="/help">Помощь</a></li>  </ul></nav>
          <nav>
  <ul>
    <li><a href="/about">О команде</a></li>
    <li><a href="/projects">Наши проекты</a></li>
    <li><a href="/contact-us">Связаться с нами</a></li>
    <li><a href="/help">Помощь</a></li>
  </ul>
</nav>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          a {  white-space: nowrap;}
          a {
  white-space: nowrap;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Ключевые слова:

        
          
          .element {  white-space: normal;  white-space: nowrap;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  white-space: break-spaces;}
          .element {
  white-space: normal;
  white-space: nowrap;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: break-spaces;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если текста в элементе много (больше, чем может вместить ширина элемента), то по умолчанию браузер пытается переносить слова на новую строку. Перенос в общем случае выполняется по символам пробела либо по символам переноса строк. Разговор сейчас идёт именно про форматирование текста прямо внутри HTML. Ведь мы можем в HTML длинный абзац оставить одной строкой, а можем разбить на несколько строк, используя клавишу Enter. По умолчанию браузер игнорирует форматирование в HTML. Он ориентируется только на теги, и выводит текст на экран, опираясь на текущий способ обработки пробельных символов. Но мы можем изменить этот способ, используя различные значения свойства white-space.

Если в строке есть несколько подряд идущих пробелов, то браузер схлопывает их в один пробел. Я из лесу вышел = Я из лесу вышел. Все переносы строк в HTML внутри тега также заменяются на пробел:

        
          
          <p>  Однажды,    <!-- Перенос строки -->  в студёную    <!-- Перенос строки -->  зимнюю    <!-- Перенос строки -->  пору</p><p>Я     из     лесу    вышел;</p>
          <p>
  Однажды,    <!-- Перенос строки -->
  в студёную    <!-- Перенос строки -->
  зимнюю    <!-- Перенос строки -->
  пору
</p>
<p>Я     из     лесу    вышел;</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В итоге текст на странице переносится по пробелам, учитывая границы элемента.

Подряд идущие пробелы и переносы строк обрабатываются так же, как и с normal, но браузер перестаёт учитывать границы элемента и выводит весь текст в одну строку.

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

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

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

Поведение аналогично pre-wrap, за исключением одного отличия. Мы помним, что при значении pre-wrap слова переносятся, учитывая границы элемента, но если за крайним словом у границы следуют несколько пробелов, то они сохраняются в той же строке. В варианте с break-spaces эти пробелы поведут себя сложнее. Какая-то их часть останется на той же строке, дополняя ширину элемента до максимально допустимой, а вторая часть пробелов перенесётся на новую строку.

        
          
          <p>Однажды,    в    студёную зимнюю     пору    Я из лесу       вышел;        был сильный мороз.</p>
          <p>Однажды,    в    студёную зимнюю     пору
    Я из лесу       вышел;        был сильный мороз.</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Принудительно организовать перенос текста вне зависимости от форматирования можно с использованием тега <br>. Поведение текста при использовании этого тега одинаково при любых значениях свойства white-space. Даже при значении nowrap текст будет переноситься в том месте, где используется <br>.

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

🛠 Довольно часто значение white-space: pre используется при вёрстке исходного кода:

+ Развернуть