Как сделать перенос строк в css

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

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

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

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

в комментариях, которые заполняют посетители, далёкие от HTML. Абзацы разбиваются не тегом
, а перевод строки обозначается не тегом
, а символом , который печатает клавиша Enter .
для демонстрации HTML кода.
для оформления стихов.

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

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

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

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

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

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

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

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

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

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

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

Тег

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

ноль один

три Enter пять шесть

 div ноль один <br> три Enter пять шесть

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

три Enter пять шесть

 #raz ноль один <div></div>  три Enter пять шесть

Свойство white-space

 h1 < white-space: pre-line; > span Это должно быть сверху это под ним

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

  Текст

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

  Дельфин из символов

Перенос слов CSS (свойство word-wrap и др.)
Красная строка CSS (свойство text-indent )
Колонки CSS

Как сделать перенос строки?

Сделать перенос строки в желаемом месте текста можно несколькими путями. Рассмотрим несколько вариантов: через элемент , элемент и свойство white-space.

Использование

Первому
игроку
приготовиться

В примере 1 элемент
применяется для вывода стиха, где переносы строк выполняются определённым, задуманным автором образом.

Пример 1. Использование

Перенос текста

Не знаю, о чём я тоскую.
Покоя душе моей нет.
Забыть ни на миг не могу я
Преданье далёких лет.

Генрих Гейне, Лорелея. Перевод Самуила Маршака

Использование

Пример 2. Использование

Перенос текста

if a % 2 == 0: print('Чётное число') else: print('Нечётное число')

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

Использование свойства white-space

У свойства white-space есть несколько значений, дающих разные возможности, но нас интересует значение pre-line , которое учитывает только переносы текста и игнорирует идущие подряд пробелы (пример 3). Получается, что от взяли только переносы строк без учёта пробелов. Сам шрифт тоже не меняется на моноширинный.

Пример 3. Использование white-space

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

Пример 4. Перенос строк в зависимости от ширины

Здесь текст исходно выводится в одну строку и переносы добавляются браузером автоматически. При уменьшении ширины окна до 600 пикселей переносы возникают там, где мы их сделали в коде HTML.

См. также

text-overflow
white-space
Оформление ссылок
Работа с текстом
Форматирование HTML

hyphens

CSS свойство hyphens указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.

Интерактивный пример

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang , и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang (en-US) .

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

Синтаксис

/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset;

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.

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

Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Однако предлагаемые возможности разрыва строки (смотреть Предлагаемые возможности разрыва строки ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута lang , чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Предлагаемые возможности разрыва строки

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте для вставки мягкого дефиса.

Формальное определение

Начальное значение	manual
Применяется к	все элементы
Наследуется	да
Обработка значения	как указано
Animation type	discrete

Формальный синтаксис

hyphens =
none | (en-US)
manual | (en-US)
auto

word — break

Что делать, если слово слишком длинное и не помещается в блок целиком?

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство word — break определяет, как будет переноситься на новую строку текст при достижении края родительского контейнера.

Пример

Скопировать ссылку «Пример» Скопировано

 p  word-break: normal;> p  word-break: normal; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

Свойство word — break можно глобально задать для всей страницы, добавив его в стили для селектора body .

Особенности переноса текста

Скопировать ссылку «Особенности переноса текста» Скопировано

Перенос текста в CSS происходит по определённым правилам, которые могут зависеть от языка и заданных CSS стилей (включает свойства word — break , line — break , white — space , text — align , text — justify и hyphens ). Вот некоторые правила из спецификации:

Обязательные переносы: текст обязательно переносится на новую строку, если есть символы перевода строки (например, \n ).
Мягкие переносы: это такие места, где текст переносится на новую строку, если он не умещается в текущей строке. Сюда относятся пробелы и другие символы-разделители. В некоторых языках между символами могут быть и другие мягкие переносы, которые зависят от языковых правил.
Дефисы и слоги: в алфавитных языках, таких как английский и русский, слова могут быть разбиты на слоги и перенесены с использованием дефиса и языковых правил (кстати, язык определяется по HTML-атрибуту lang ). Автоматическим переносом слов с использованием дефиса управляет свойство hyphens .
Особенности языка: некоторые языки имеют специфические правила переноса текста. В идеографических языках, таких как китайский, и слоговых языках, таких как корейский, перенос слов и разрыв строк происходит в других местах (например, между корейскими иероглифами может быть разрыв, даже если между ними нет пробела).

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

Также свойство word — break играет важную роль в CJK языках (китайский, японский и корейский): значение word — break : keep — all запрещает разрывать слова внутри CJK текста, где разрывы строк могут быть нежелательными между определёнными иероглифами.

На практике

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

Свойство word — break : break — all очень похоже на overflow — wrap : break — word по своей сути. Однако, есть некоторые различия в их работе.

Свойство word — break : break — all позволяет разрывать слова в любом месте, в том числе и в середине слова, чтобы уместить их в контейнере. С одной стороны, это можно привести к трудно читаемому тексту, с другой, такой перенос хорошо подходит для переноса длинных ссылок или, например, строк кода.

Свойство overflow — wrap : break — word пришло на смену word — wrap : break — word . Оно позволяет переносить длинные слова в любом месте, а не только посередине слова. Это означает, что браузер может добавить перенос слова в любом месте, если это позволяет уместить слово внутри контейнера. Это свойство также сохраняет целостность слов, если они могут поместиться внутри контейнера.

Читать:

Как вызвать телефонный звонок