Код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>

HTML перенос с помощью тега <br>

Тег <br> перенесёт последующие inline-элементы на следующую строку с любым значением свойства 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>

HTML перенос блочного элемента

Всё содержимое блочного элемента будет перенесено на новую строку с любым значением свойства 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: pre; у ::after

ID:
3896921
Диагональ (дюйм):
5,93
Разрешение (пикс):
2160 × 1080
Фотокамера (Мп):
16 + 2 (двойная)
Процессор:
HiSilicon Kirin 659
<style>
#raz dt,
#raz dd {
  display: inline;
  margin: 0;
}
#raz dd::after { /* в конце каждого тега <dd> добавляется разрыв строки (автор идеи) */ 
  content: '\A';
  white-space: pre;
}
</style>

<dl id="raz">
  <dt>ID:
  <dd>3896921
  <dt>Диагональ (дюйм):
  <dd>5,93
  <dt>Разрешение (пикс):
  <dd>2160 × 1080
  <dt>Фотокамера (Мп):
  <dd>16 + 2 (двойная)
  <dt>Процессор:
  <dd>HiSilicon Kirin 659
</dl>
Все комментарии