JS властивість CSSStyleDeclaration.wordBreak

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

element.style.wordBreak - це CSS-властивість, яка контролює, як слова переносяться на новий рядок у тексті елемента. Ця властивість корисна для забезпечення гарного форматування тексту, особливо в ситуаціях, коли довгі слова або URL-адреси можуть виходити за межі контейнера.

Значення властивості wordBreak можуть бути наступними: normal, break-all, keep-all, break-word. Значення normal використовує стандартні правила перенесення слів і є значенням за замовчуванням. Значення break-all дозволяє розривати слова в будь-якому місці, щоб уникнути виходу тексту за межі контейнера. Значення keep-all забороняє розривати слова для перенесення, за винятком ієрогліфічних мов, таких як китайська, японська і корейська. Значення break-word дозволяє розривати слова тільки тоді, коли це необхідно, щоб уникнути виходу тексту за межі контейнера.

Розглянемо декілька прикладів використання властивості wordBreak через JavaScript.

Приклад 1: Використання wordBreak зі значенням break-all. Це корисно для випадків, коли ви хочете уникнути горизонтальної прокрутки через довгі слова або URL-адреси.

var element = document.getElementById('breakAllElement');
element.style.wordBreak = 'break-all';

У цьому прикладі елемент з id breakAllElement буде переносити слова в будь-якому місці, якщо вони не вміщаються в контейнер.

Приклад 2: Використання wordBreak зі значенням keep-all. Це корисно для забезпечення, щоб слова не розривалися в тексті, особливо для ієрогліфічних мов.

var element = document.getElementById('keepAllElement');
element.style.wordBreak = 'keep-all';

У цьому прикладі елемент з id keepAllElement не буде переносити слова, за винятком ієрогліфічних мов, що забезпечує цілісність тексту.

Приклад 3: Використання wordBreak зі значенням break-word. Це корисно для гнучкого перенесення тексту, коли потрібно розривати слова тільки в разі необхідності.

var element = document.getElementById('breakWordElement');
element.style.wordBreak = 'break-word';

У цьому прикладі елемент з id breakWordElement буде розривати слова тільки тоді, коли це необхідно, щоб уникнути виходу тексту за межі контейнера.

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

Порада:	Комбінуйте властивість `wordBreak` з іншими CSS властивостями, такими як `overflow-wrap` і `hyphens`, для більш точного контролю перенесення тексту. Це дозволить вам створювати більш гнучкі та адаптивні дизайни, де текст автоматично підлаштовується під різні умови відображення. Наприклад, ви можете використовувати їх разом для довгих описів або заголовків.
Порада:	Коли працюєте з динамічним контентом, таким як чати або коментарі, використовуйте `element.style.wordBreak` для запобігання виходу довгих слів за межі контейнера. Це допоможе підтримувати акуратний вигляд інтерфейсу і уникнути проблем з розміщенням тексту. Наприклад, для блоків з повідомленнями в чаті.
Порада:	Використовуйте `element.style.wordBreak = 'break-all'` для довгих URL-адрес або технічного тексту, де існує ймовірність виходу за межі контейнера. Це допоможе уникнути горизонтальної прокрутки і забезпечити правильне відображення тексту навіть у вузьких контейнерах. Наприклад, якщо у вас є блок з кодом, який містить довгі рядки без пробілів, це налаштування буде особливо корисним.

Синтаксис

element.style.wordBreak

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачам змінювати режим перенесення тексту в елементі за допомогою кнопок. Використовуючи властивість wordBreak, користувачі можуть вибирати між стандартним перенесенням слів (normal), примусовим розривом слів у будь-якому місці (break-all), запобіганням розриву слів (keep-all) та розривом слів тільки в разі необхідності (break-word). Це допомагає наочно продемонструвати різні підходи до перенесення тексту в залежності від потреб оформлення контенту.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/abgwqjG">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі властивість wordBreak динамічно змінюється залежно від ширини вікна браузера. Якщо ширина вікна менше 600 пікселів, використовується значення break-all, щоб уникнути горизонтальної прокрутки для вузьких екранів. При більшій ширині використовується значення normal для збереження стандартного перенесення слів. Це особливо корисно для адаптивних макетів, де важливо підтримувати читабельність тексту на різних пристроях.

var contentElement = document.getElementById('contentElement');

function adjustWordBreak() {
  var windowWidth = window.innerWidth;
  if (windowWidth < 600) {
    contentElement.style.wordBreak = 'break-all';
  } else {
    contentElement.style.wordBreak = 'normal';
  }
}

// Викликати функцію при завантаженні сторінки та зміні розміру вікна
window.addEventListener('load', adjustWordBreak);
window.addEventListener('resize', adjustWordBreak);

У цьому прикладі користувач може переключати режим перенесення тексту за допомогою кнопки. При натисканні кнопки змінюється значення wordBreak між break-word і keep-all, що дозволяє користувачу вибирати між гнучким перенесенням тексту та збереженням цілісності слів. Це корисно для інтерфейсів, де користувачі можуть захотіти змінювати спосіб відображення тексту залежно від своїх потреб або вподобань.

var textElement = document.getElementById('textElement');
var toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', function() {
  if (textElement.style.wordBreak === 'break-word') {
    textElement.style.wordBreak = 'keep-all';
    toggleButton.textContent = 'Switch to break-word';
  } else {
    textElement.style.wordBreak = 'break-word';
    toggleButton.textContent = 'Switch to keep-all';
  }
});

JS довідник

JavaScript

Наповнення JS розділу