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, для більш точного контролю перенесення тексту. Це дозволить вам створювати більш гнучкі та адаптивні дизайни, де текст автоматично підлаштовується під різні умови відображення. Наприклад, ви можете використовувати їх разом для довгих описів або заголовків.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.wordBreak

Переглядачі

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

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

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

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

Переглядач
	4.4	18	15	2

Приклади

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

<div id="textElement">Демонстраційний елемент</div>
<button id="toggleButton">Перемкнути</button>

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';
  }
});

<div id="contentElement">Демонстраційний елемент</div>

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);