КодSEOБлогИное

Перенос строки CSS

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Перенести ли текст автоматически или показать в одну строку, отобразить рядомстоящие пробелы как один или каждый в отдельности определяет white-space.

white-space

текст переносится | пробелы не учитываются | Enter (разрыв строки) не учитывается
текст переносится | пробелы не учитываются | Enter учитывается
текст переносится | пробелы учитываются | Enter учитывается
текст не переносится | пробелы учитываются | Enter учитывается
текст не переносится | пробелы не учитываются | Enter не учитывается
normal
наследует значение родителя
наследует значение родителя
ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать
<style>
div {
  white-space: normal; /* свойство white-space наследуется, применяется ко всем элементам */ 
  border: 1px solid red;
}
</style>

<div>ноль один  два   три    <kbd>Enter</kbd>
     пять      шесть       семь        восемь         девять          десять           одиннадцать            двенадцать             тринадцать              четырнадцать</div>

У тега <pre> по умолчанию white-space имеет значение pre.

Значения, отличные от normal, часто применяются

Запретить перенос

Значения pre-wrap и pre-line поддерживаются Internet Explorer 8

Запрет переноса с помощью white-space: nowrap;

<style>
.nowrap {
  white-space: nowrap;
}
</style>

Значения <span class='nowrap'>pre-wrap</span> и <span class='nowrap'>pre-line</span> поддерживаются <span class='nowrap'>Internet Explorer 8</span>

Запрет переноса с помощью неразрывного пробела &nbsp; и/или неразрывного дефиса &#8209;

В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word; или word-wrap: break-word; или word-break: break-all; символы всё же в определённый момент переходят на следующую строчку.

Значения pre&#8209;wrap и pre&#8209;line поддерживаются Internet&nbsp;Explorer&nbsp;8

Прокрутка при отключении автопереноса

Часто совместно со значениями pre или nowrap элементу меняется значение свойства overflow, чтобы добавить полосу прокрутки или обрезать выходящую за границу часть, дабы не появился горизонтальный скролл у всего сайта.

<style>
div {
  width: 50%;
  border: 1px solid red;
  white-space: nowrap;
}
div:nth-child(2) {
  overflow: hidden;
}
div:nth-child(3) {
  overflow-x: scroll;
}
div:nth-child(4) {
  overflow: auto;
}
</style>

overflow: visible;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>
overflow: hidden;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>
overflow-x: scroll;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>
overflow: auto;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>

Разрыв строки

Тег <br>

Элементы после тега <br> будут перенесены на следующую строку с любым значением свойства white‑space.

ноль один <br>
три Enter пять шесть
<style>
div {
  white-space: nowrap;
  border: 1px solid red;
}
</style>

<div>ноль один  <code>&lt;br&gt;</code><br>   три    <kbd>Enter</kbd>
     пять      шесть</div>

Блочный элемент

Всё содержимое блочного элемента будет перенесено на отдельную строку с любым значением свойства white‑space.

ноль один
<div></div>
три Enter пять шесть
<style>
#raz {
  white-space: nowrap;
  border: 1px solid red;
}
</style>

<div id="raz">ноль один  <div><code>&lt;div&gt;&lt;/div&gt;</code></div>   три    <kbd>Enter</kbd>
     пять      шесть</div>

Свойство white-space

<style>
h1 {
  white-space: pre-line;
}
span {
  padding: 0 .5em;
  background: black;
  color: #fff;
}
</style>

<h1>Это должно быть сверху
<span>это под ним</span></h1>

Разрыв строки в псевдоэлементах ::before/::after

<style>
div::after {
  content: "\A Номер: 1 \A Год: 2017"; /* &#10; в HEX обозначен \A */ 
  white-space: pre;
}
</style>

<div>Текст</div>

У моноширинного шрифта все символы одной ширины, в том числе пробел

¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ ¶¶¶¶¶¶ ¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶ ¶¶¶ ¶¶¶¶¶¶¶ ¶¶ ¶¶ ¶¶¶¶¶¶¶¶ ¶¶ ¶¶¶¶ ¶ ¶¶ ¶¶ ¶0 ¶ ¶¶ ¶¶¶¶¶¶¶ ¶¶ ¶ ¶¶¶¶ ¶¶ ¶¶ ¶¶ ¶ ¶¶¶¶¶¶¶¶¶¶¶ ¶ ¶ ¶¶ ¶¶ ¶¶¶¶¶¶¶¶¶¶ ¶¶ ¶ ¶ ¶¶ ¶ ¶¶ ¶¶¶¶¶¶¶ ¶ ¶¶ ¶ ¶ ¶¶¶ ¶ ¶ ¶ ¶¶¶¶¶ ¶ ¶¶¶¶ ¶¶ ¶¶ ¶ ¶¶¶¶¶¶ ¶ ¶ ¶¶¶¶¶¶ ¶ ¶¶¶¶¶ ¶ ¶ ¶ ¶¶¶¶¶ ¶¶ ¶¶¶ ¶¶ ¶ ¶¶¶¶ ¶¶¶¶¶ ¶¶ ¶ ¶ ¶¶ ¶¶¶ ¶¶¶¶ ¶ ¶¶¶¶ ¶ ¶¶ ¶¶¶ ¶ ¶¶¶¶¶ ¶ ¶¶¶¶ ¶¶ ¶ ¶¶¶ ¶¶ ¶¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶ ¶ ¶ ¶ ¶ ¶¶ ¶¶ ¶¶¶¶¶¶ ¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶¶ ¶¶ ¶ ¶¶¶ ¶¶ ¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶ ¶ ¶ ¶ ¶¶
<style>
div {
  white-space: pre;
  overflow: auto;
  font-family: monospace;
  line-height: normal;
}
</style>

<div>Дельфин из символов</div>
Все комментарии