Как добавить с помощью свойств css перенос строки

Терминология

Перевод строки сокращают как NEL (от англ. next line — «со следующей строки, переход на следующую строку», или newline — «с новой строки, переход на новую строку»).

Возврат каретки (англ. carriage return, CR) — управляющий символ ASCII (0x0D, 13, ‘\r’), при выводе которого курсор перемещается к левому краю поля. Этот управляющий символ вводится клавишей «Enter». Будучи записан в файле, в отдельности рассматривается как перевод строки только в системах Macintosh.

Подача на строку или Перевод на строку (от англ. line feed, LF — «подача на строку») — управляющий символ ASCII (0x0A, 10 в десятичной системе счисления, ‘\n’), при выводе которого курсор перемещается на следующую строку. В случае принтера это означает сдвиг бумаги вверх, в случае дисплея — сдвиг курсора вниз, если ещё осталось место, и прокрутку текста вверх, если курсор находился на нижней строке. Возвращается ли при этом курсор к левому краю или нет, зависит от реализации.

Таким образом, вывод последовательности CR+LF в семантике терминала гарантирует действие «создание новой строки».

Терминалы (и их эмуляторы) могут также проводить различные преобразования символов (например, LFCR+LF, CRCR+LF) при вводе и выводе текста.

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

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

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

Тег

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


ноль один три Enter пять шесть

<style>
div {
  white-space: nowrap;
  border: 1px solid red;
}
</style>

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

Свойство

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

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

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


¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ ¶¶¶¶¶¶ ¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶ ¶¶¶ ¶¶¶¶¶¶¶ ¶¶ ¶¶ ¶¶¶¶¶¶¶¶ ¶¶ ¶¶¶¶ ¶ ¶¶ ¶¶ ¶0 ¶ ¶¶ ¶¶¶¶¶¶¶ ¶¶ ¶ ¶¶¶¶ ¶¶ ¶¶ ¶¶ ¶ ¶¶¶¶¶¶¶¶¶¶¶ ¶ ¶ ¶¶ ¶¶ ¶¶¶¶¶¶¶¶¶¶ ¶¶ ¶ ¶ ¶¶ ¶ ¶¶ ¶¶¶¶¶¶¶ ¶ ¶¶ ¶ ¶ ¶¶¶ ¶ ¶ ¶ ¶¶¶¶¶ ¶ ¶¶¶¶ ¶¶ ¶¶ ¶ ¶¶¶¶¶¶ ¶ ¶ ¶¶¶¶¶¶ ¶ ¶¶¶¶¶ ¶ ¶ ¶ ¶¶¶¶¶ ¶¶ ¶¶¶ ¶¶ ¶ ¶¶¶¶ ¶¶¶¶¶ ¶¶ ¶ ¶ ¶¶ ¶¶¶ ¶¶¶¶ ¶ ¶¶¶¶ ¶ ¶¶ ¶¶¶ ¶ ¶¶¶¶¶ ¶ ¶¶¶¶ ¶¶ ¶ ¶¶¶ ¶¶ ¶¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶ ¶ ¶ ¶ ¶ ¶¶ ¶¶ ¶¶¶¶¶¶ ¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶¶ ¶¶ ¶ ¶¶¶ ¶¶ ¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶ ¶ ¶ ¶ ¶¶

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

<div>Дельфин из символов</div>

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

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

Запрет переноса с помощью

<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>

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


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

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

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


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

<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>

Трудности

Нет общепринятых сокращений русских терминов. ВК (Возврат Каретки) совпадает по написанию с сокращением от англ. BreaK («разрыв », — то же, что перевод строки), а ПС не различает Подачу Строки и Перевод Строки.

Разница представлений

Отсутствие единого общепринятого представления перевода строки в разных операционных системах осложняет обмен текстовыми данными между ними. Юникод старается примирить эту разницу, уравнивая CR, LF и CR+LF, однако вступает в противоречие с наследуемым им ASCII при трактовке последовательности LF+CR, не предварённой CR: согласно ASCII это один перевод строки, а согласно Юникоду — два.

Перевод строки при вводе с клавиатуры представлен единообразно во всех системах — символом CR, и в системах с другим представлением перевода строки текстовые данные приходится перекодировать в необходимый формат.


С этим читают