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 дозволяє гнучко керувати перенесенням слів у тексті елемента, забезпечуючи гарне форматування та уникнення проблем з розташуванням тексту. Це особливо корисно для адаптивних веб-дизайнів і ситуацій, коли важливо зберегти цілісність контенту.
| Порада: | Комбінуйте властивість |
| Порада: | Коли працюєте з динамічним контентом, таким як чати або коментарі, використовуйте |
| Порада: | Використовуйте |
Синтаксис
element.style.wordBreakЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачам змінювати режим перенесення тексту в елементі за допомогою кнопок. Використовуючи властивість wordBreak, користувачі можуть вибирати між стандартним перенесенням слів (normal), примусовим розривом слів у будь-якому місці (break-all), запобіганням розриву слів (keep-all) та розривом слів тільки в разі необхідності (break-word). Це допомагає наочно продемонструвати різні підходи до перенесення тексту в залежності від потреб оформлення контенту.
У цьому прикладі властивість 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';
}
});