CSS overflow-wrap — перенос довгого слова

Властивість overflow-wrap визначає чи можуть довгі слова, які не поміщаються до батьківського контейнеру, переноситися на наступний рядок. Властивість може бути застосована для того, щоб змусити слово розбитись у довільній точці, якщо в рядку не існує іншим чином прийнятних точок переривання.

overflow-wrap має ефект лише тоді, коли властивість white-space дозволяє перенесення (без задання).

На відміну від word-break, overflow-wrap лише створить розрив, якщо ціле слово не може бути розміщене у рядку без переповнення.

На цьому прикладі ми бачимо два однакових рядки тексту. Якщо у першому, нерозривне слово виходить за межі контейнеру, у другому - слово переноситься:

Властивість word-wrap працює в багатьох старих браузерах, а overflow-wrap - тільки в нових. Тому, в даний час, вказувати доводиться обидві властивості, спочатку застарілу (для старих браузерів), а потім нову (для нових браузерів):

селектор {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

правити

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

правити

Нотатка

word-wrap - це альтернативна назва overflow-wrap. Вони обидві роблять теж саме.

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

Нотатка

Відсотковий запис не застосовується.

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

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

Синтаксис

overflow-wrap: normal | break-word | inherit | initial | unset;

Властивість overflow-wrap може отримувати 5 значень:

normal

Рядки тексту можуть розбитись лише там де розташовані звичайні точки розриву слова (наприклад, пробіл між двома словами).

автор: Svitlana

правити

break-word

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

unset

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	23	49	7	12.1	18	5.5*

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

Переглядач
	4.4	25	49	7

Приклади

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

<p class="no">Без переносу: Superkalifragilisticexpialidocious</p>
<p class="yes">З break-word: Superkalifragilisticexpialidocious</p>

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

.yes {
    overflow-wrap: break-word;
}

<p>This is very looooooooooooooooooong string. Do not worry about it...</p>
<p class="change">This is very looooooooooooooooooong string. Do not worry about it...</p>

p {
	background-color: #eee;
	padding: 4px 2px;
	font-size: 18px;
	width: 75px;
	display: inline-block;
	margin-right: 200px;
}

.change {
	overflow-wrap: break-word;
}

<div class="box">
  <b>без overflow-wrap</b>
  <p>https://example.com/dovgyj-shljah/bez-zhodnogo-probilu-abo-defisa-vzagali</p>
</div>

<div class="box wrap">
  <b>overflow-wrap: break-word</b>
  <p>https://example.com/dovgyj-shljah/bez-zhodnogo-probilu-abo-defisa-vzagali</p>
</div>

.box {
    width: 200px;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #4a6fa5;
    background: #f3f6fa;
    font: 14px sans-serif;
}
.box p { margin: 6px 0 0; }
.wrap p { overflow-wrap: break-word; }

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

<select id="form">
  <option value="normal" name="value2" selected>normal</option>
  <option value="break-word" name="value2">break-word</option>
</select>

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

<hr>

<p id="block">Lorem ipsum dolor sit amet consecteooooooooooooooooooooooooooooooooootur, adipisicing elit. Hic laboriosam ipsum enim iste cum velit eligendi magnam vel similique? Excepturi blanditiis ad mollitia autem nulla id eum perferendis provident atque corporis, nostrum accusamus unde illo, vel voluptate, perspiciatis inventore fugit culpa recusandae commodi voluptatem. Voluptates quasi perferendis deserunt saepe fugiat?</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;
  width: 200px;
  overflow-wrap: break-word;
}

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

var textArray = { 'normal': 'Рядки тексту можуть розбитись лише там де розташовані звичайні точки розриву слова (наприклад, пробіл між двома словами).',
  'break-word': 'Щоб запобігти переповненню, нерозривні слова можуть бути перенесені в довільних точках, якщо в рядку відсутні іншим чином прийнятні точки переривання.' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.wordWrap = 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