Новая строка и перенос текста: HTML, CSS и Word cover

Перенос строки — это переход текста на следующую строку: в редакторе, в разметке или в коде. От того, как задаётся перенос, зависит и вид документа, и вёрстка на сайте: длинное слово может вылезать за блок, абзац — разъезжаться или, наоборот, оставаться компактным. В статье — как сделать перенос строки и перенос слов в Word, в HTML и CSS: тег <br>, свойства word-break, overflow-wrap, hyphens, мягкий перенос ­, неразрывный пробел и примеры кода.

Содержание

• Перенос строки: что это такое
• В Word: автоматически, вручную, мягкий и неразрывный
• В HTML: новая строка и пробелы
• В CSS: перенос слов и разрыв строки
• Примеры: узкий блок, длинное слово, абзацы
• Символы и коды
• Выводы

Перенос строки: что это такое

Перенос строки — переход печати (или отображения) текста на следующую строку. В текстовом редакторе это обычно нажатие Enter (новый абзац) или автоматический перенос, когда строка заполнена. В разметке и вёрстке перенос задаётся явно: тегом, символом или CSS-свойством.

Различают:

• Жёсткий перенос — явная «новая строка» в нужном месте (например, тег <br> в HTML или символ перевода строки в коде).
• Мягкий перенос — подсказка, где можно разорвать слово, если не хватает места (мягкий дефис, ­ в HTML).
• Автоматический перенос — браузер или редактор сам переносит текст по границам блока или по правилам (например, по пробелам между словами).

В Word: автоматически, вручную, мягкий и неразрывный

В Microsoft Word перенос строки настраивается так:

Автоматический перенос

Включить авто-перенос слов в конце строки: Макет → Расстановка переносов → Авто. Тогда длинные слова будут разрываться по слогам в соответствии с правилами языка.

Жёсткий перенос (новая строка без нового абзаца)

Shift+Enter — разрыв строки внутри абзаца. Курсор переходит на следующую строку, но абзац не создаётся (удобно для стихов, адресов).

Мягкий перенос (подсказка, где разорвать слово)

Ctrl+‑ (минус) — вставляется мягкий перенос: если слова не хватает места, оно разорвётся в этом месте и появится дефис. Если места достаточно — символ не показывается. Чтобы видеть скрытые знаки: Главная → Абзац → Отобразить все знаки.

Неразрывный пробел и неразрывный дефис

Чтобы слово или фраза не разрывались (например, «10 000 руб.», телефон, инициалы):

• Неразрывный пробел: Ctrl+Shift+Пробел — пробел, на котором строка не разрывается.
• Неразрывный дефис: Ctrl+Shift+‑ — дефис без разрыва (номера, диапазоны).

Так можно «склеить» число с единицей измерения или части имени.

В HTML: новая строка и пробелы

В HTML перенос текста на следующую строку и отображение пробелов подчиняются правилам разметки.

Тег <br> — принудительный перенос строки

<br> — одиночный (самозакрывающийся) тег. В месте, где он стоит, браузер начинает новую строку. Закрывать его не нужно.

Пример:

<p>Первая строка.<br>Вторая строка.</p>

На экране будет:

• Первая строка.
• Вторая строка.

Используйте <br> там, где разрыв строки — часть смысла (стихи, адрес, короткие подписи). Для абзацев лучше отдельные блоки <p>.

Пробелы и переносы в исходном коде

В HTML несколько подряд идущих пробелов и один перенос строки по умолчанию отображаются как один пробел. Поэтому перенос строки в исходнике между словами не даёт переноса на экране — только пробел. Чтобы показать несколько пробелов или «как в коде», используют тег <pre> или CSS-свойство white-space.

В CSS: перенос слов и разрыв строки

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

word-break и overflow-wrap

Значения word-break:

• normal — перенос по умолчанию (по пробелам, по правилам языка). Длинное слово без пробелов может вылезти за границу.
• break-all — разрешить разрыв в любом месте слова. Удобно для длинных URL или слитных строк без пробелов; выглядит грубо.
• keep-all — по возможности не разрывать слово (актуально для CJK).

Значения overflow-wrap:

• normal — слово переносится только в «разрешённых» местах.
• break-word — если слово не помещается целиком, разрешить разрыв внутри него (дополняет поведение при word-break: normal).

Пример: узкий блок и длинное слово.

.box {
  width: 120px;
  border: 1px solid #ccc;
  padding: 8px;
}

/* Длинное слово может вылезти за блок */
.box-default {
  word-break: normal;
}

/* Разрешить разрыв в любом месте — слово не вылезет */
.box-break {
  word-break: break-all;
}

/* Разрывать только если слово не помещается; иначе по пробелам */
.box-wrap {
  overflow-wrap: break-word;
}

Мягкий перенос и hyphens

Мягкий перенос в HTML — символ ­ (soft hyphen). Браузер показывает дефис и переносит строку только если слово не помещается; иначе ­ невидим.

Пример: «дисплейдисплейдисплей» с подсказками переноса.

<p>дисплей&shy;дисплей&shy;дисплей</p>

В узком блоке слово разорвётся в указанных местах с дефисом.

Свойство hyphens в CSS управляет автоматической расстановкой переносов по словарю браузера:

• none — не переносить по слогам.
• manual — только в явных местах (например, после ­).
• auto — браузер сам ставит переносы по правилам языка (нужен атрибут lang у элемента или у <html>).

Для русского языка важно указать lang="ru" на <html> или на контейнере, иначе авто-переносы могут не сработать.

p {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

white-space: как браузер показывает пробелы и переносы

Свойство white-space задаёт, как обрабатывать пробелы и переводы строк в исходном коде:

Пример: сохранить переносы строк из кода (как в <pre>, но с переносом по ширине).

.poem {
  white-space: pre-line;
}

На экране будет три строки; лишние пробелы внутри строки схлопнутся.

Примеры: узкий блок, длинное слово, абзацы

Узкий блок и длинный URL: чтобы ссылка не вылезала за контейнер и не ломала вёрстку, можно разрешить разрыв внутри слова:

.url-cell {
  overflow-wrap: break-word;
  word-break: break-all; /* при необходимости */
}

Абзацы и отступ первой строки: перенос на новую строку в смысле «новый абзац» делают отдельным блоком <p>. Отступ задаётся через text-indent или отступы у <p>.

<p>Первый абзац текста.</p>
<p>Второй абзац. Внутри абзаца для принудительного разрыва используйте <br>.</p>

Неразрывный пробел в HTML: символ   (non-breaking space). Слова, между которыми стоит  , не разнесутся на разные строки. Удобно для чисел с единицами: «10 000 руб.»

Символы и коды

Краткая шпаргалка по символам и сущностям:

В JavaScript строку с переносами для вывода в HTML можно превратить в разметку с <br>:

const text = "Первая строка\nВторая строка";
const html = text.split('\n').join('<br>');
element.innerHTML = html;

Или выводить в элемент с white-space: pre-line, тогда \n отобразятся как переносы.

Выводы

• Перенос строки бывает жёстким (<br>, Enter), мягким (подсказка разрыва, ­) и автоматическим (по ширине блока, по пробелам).
• В Word: Enter — новый абзац, Shift+Enter — новая строка без абзаца, Ctrl+− — мягкий перенос, Ctrl+Shift+Пробел — неразрывный пробел, Ctrl+Shift+− — неразрывный дефис.
• В HTML: <br> — принудительная новая строка; пробелы и переносы в коде по умолчанию схлопываются в один пробел.
• В CSS: word-break и overflow-wrap управляют переносом слов; hyphens: auto даёт перенос по слогам (нужен lang). white-space задаёт отображение пробелов и переносов из исходника.
• Для «не разрывать» используйте неразрывный пробел   в HTML и соответствующие комбинации в Word. Для длинных слов в узком блоке — overflow-wrap: break-word, word-break: break-all или мягкий перенос ­ / hyphens: auto.