CSS line-break — правила переносу рядків

Властивість line-break використовується для визначення способи (або можливості) розбити рядки при роботі з пунктуацією та символами. Це впливає лише на текст китайською, японською чи корейською мовами (CJK).

Зокрема, переривання рядків визначає, як обгортатиметься вміст, якщо він містить пунктуацію та символи.

Правила переривання рядків залежать від використовуваної мови. Різні мови мають різні правила / конвенції, за яких може відбуватися переривання рядків. Наприклад, якщо мова китайська чи японська, розриви перед дефісом, дозволяється, якщо line-break має значення normal або loose, але не strict.

правити

Загальний опис

правити

Нотатка

Оскільки специфікація цієї технології ще не стабілізувалася, перевірте таблицю сумісності з браузерами.

Також зауважте, що синтаксис і поведінка цієї технології можуть змінюватися в майбутніх версіях браузерів, через можливу зміну специфікації.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість line-break може отримувати 7 значень:

auto

Браузер автоматично визначає переривання рядків.

автор: Svitlana

правити

loose

Розбиває текст з найменш обмежувальним набором правил розбиття. Це корисно для тих випадків, коли область вмісту є особливо вузькою, наприклад, при відображенні її в багатоколонному макеті.

автор: Svitlana

правити

normal

Розбиває текст, використовуючи найпоширеніший набір лінійних правил.

автор: Svitlana

правити

strict

Розбиває текст, використовуючи найсуворіший набір лінійних правил.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання.

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

unset

Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	58	69	11	45	14	5.5

Підтримка: мобільні переглядачі

Переглядач
	58	58	79	11

Приклади

+ запропонувати свій приклад у пісочниці

<p lang="ja" class="loose">日本語のテキストは、句読点。の前後で行の折り返し方が変わります。</p>
<p lang="ja" class="strict">日本語のテキストは、句読点。の前後で行の折り返し方が変わります。</p>

p {
    width: 170px;
    border: 1px solid #ccc;
    padding: 6px;
}

.loose  { line-break: loose; }
.strict { line-break: strict; }

<div class="box">
  <b>без задання</b><br>
  Замовлення прийнято: https://example.com/catalog/velykyi-riukzak-z-bichnoiu-kysheneiu
</div>

<div class="box lb">
  <b>line-break: anywhere</b><br>
  Замовлення прийнято: https://example.com/catalog/velykyi-riukzak-z-bichnoiu-kysheneiu
</div>

<div class="box ow">
  <b>overflow-wrap: anywhere</b><br>
  Замовлення прийнято: https://example.com/catalog/velykyi-riukzak-z-bichnoiu-kysheneiu
</div>

body {
  font-family: sans-serif;
  font-size: 14px;
  padding: 12px;
}

.box {
  width: 190px;
  margin-bottom: 16px;
  padding: 8px;
  background-color: #f4f6f8;
  border: 1px solid #4a6fa5;
}

.lb {
  line-break: anywhere;
}

.ow {
  overflow-wrap: anywhere;
}

<p>Вибери потрібні значення для <code>line-break</code>:</p>

<select id="form">
  <option value="auto" name="value2" selected>auto</option>
  <option value="loose" name="value2">loose</option>
  <option value="normal" name="value2">normal</option>
  <option value="strict" name="value2">strict</option>
</select>

<p id="text"></p>

<hr>

<p id="block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa eos molestias eum tenetur itaque earum fuga repellendus. Debitis exercitationem error accusamus sunt magnam amet magni corporis rerum facilis, illo provident earum, temporibus maiores repellat animi dolorem at optio dolores hic libero velit? Dolores, ratione recusandae possimus voluptas autem quo velit!</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  line-break: auto;
}

var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'auto': 'Браузер автоматично визначає переривання рядків',
  'loose': 'Розбиває текст з найменш обмежувальним набором правил розбиття. Це корисно для тих випадків, коли область вмісту є особливо вузькою, наприклад, при відображенні її в багатоколонному макеті.',
  'normal': 'Розбиває текст, використовуючи найпоширеніший набір лінійних правил',
  'strict': 'Розбиває текст, використовуючи найсуворіший набір лінійних правил.' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.textAlign = newVal;
  text.innerHTML = textArray[newVal];

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}
//# sourceURL=pen.js