Перерва слів - CSS-хитрощі

word-breakВластивість в CSS можна використовувати для зміни , коли розриви рядків повинні відбутися. Зазвичай розриви рядків у тексті можуть відбуватися лише в певних пробілах, наприклад, коли є пробіл або дефіс.

У наведеному нижче прикладі word-breakзамість цього можна зробити міжбукви:

p ( word-break: break-all; )

Якщо тоді ми встановимо ширину тексту на одиницю em, слово розбиватиметься на кожну букву:

Див. Текст «Налаштування ручки» вертикально з розривом слів за допомогою CSS-Tricks (@ css-tricks) на CodePen.

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

Див. Посилання «Фіксація ручки» із розривом слів від CSS-Tricks (@ css-tricks) на CodePen.

Цінності

normal: використовуйте правила за замовчуванням для розбиття слів.
break-all: будь-яке слово / буква може перейти на наступний рядок.
keep-all: для китайських, японських та корейських текстових слів не розбито. В іншому випадку це те саме, що normal.

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

Повне використання з необхідними префіксами постачальника:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

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

Пов’язані

переповнення-обгортання
дефіси
пробіл
Обробка довгих слів та URL-адрес

Підтримка браузера

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