CSS свойство line-break

Свойство line-break определяет, как переносить строки в тексте на китайском, японском или корейском языках (CJK) при работе с пунктуацией и символами. Поскольку эти языки следуют различным типографским правилам, переносы строк могут происходить не всегда в ожидаемых местах. Например, при установке значения strict переносы строк разрешены только в определенных местах, таких как после определенных знаков препинания, а не перед дефисами или произвольными символами. Спецификация CSS определяет правила, специально предназначенные для текста на китайском, японском и корейском языках (CJK).

Начальное значение	auto
Применяется к	Ко всем элементам, но только к блочным контейнерам.
Наследуется	Да.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.lineBreak = "loose";

Синтаксис

Синтаксис свойства CSS line-break

css

line-break: auto | loose | normal | strict | initial | inherit;

Пример свойства line-break:

Пример использования свойства CSS line-break со значением strict

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .korean {
        line-break: strict;
      }
    </style>
  </head>
  <body>
    <h2>Line-break property example</h2>
    <!--Be the change you want to see in the world.-->
    <span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS line-break

Пример свойства line-break со значением "normal":

Пример использования свойства CSS line-break со значением normal

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 16px;
        line-height: 24px;
        line-break: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-break property example</h2>
    <p>日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。</p>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
auto	Переносит текст по правилам переноса строк по умолчанию. Это начальное значение свойства.
normal	Переносит текст по наименее строгим правилам переноса строк.
loose	Переносит текст по наиболее распространенным правилам переноса строк.
strict	Переносит текст по наиболее строгим правилам переноса строк.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Практика

Какой из следующих способов можно использовать для вставки переноса строки в CSS?

Можно использовать <br> для вставки переноса строки.Можно использовать white-space: pre; для вставки переноса строки.Свойство clear можно использовать для вставки переноса строки.Свойство line-break можно использовать для вставки переноса строки.

CSS свойство line-break ​

Синтаксис ​

Пример свойства line-break: ​

Результат ​

Пример свойства line-break со значением "normal": ​

Значения ​