Перенесення довгих слів за допомогою CSS

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

Дефіс

Перше рішення для перенесення довгих слів – за допомогою дефіса.

Код CSS

.defisi {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Підтримка браузерами: CSS-дефіси підтримуються майже всіма сучасними браузерами, за винятком Chrome, Opera, Android. Також, дуже часто дефіс вставляється в місцях, помилкових з граматичної точки зору.

Обрив слова

Обрив слова – це властивість CSS, яке вказує на те, чи слід розривати рядки всередині слів.

Код CSS

.obriv-slova {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

 

Підтримка браузерами: Обрив слів підтримується у всіх браузерах, за винятком Opera Mini і старих версій Opera.

 

Обгортка переповнення

Наступне рішення – це використання Обгортки переповнення (overflow-wrap).

Код CSS

.obertka-perepolneniya {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

Підтримка браузерами: підтримується практично у всіх браузерах. Примітка: Деякі браузери вимагають використання “word-wrap” замість “overflow-wrap”.

 

Три крапки

Ще один варіант – використання трьох крапок.

Код CSS

.mnogotochiye {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Підтримка браузерами: підтримується всіма сучасними браузерами.

Це працюючий метод, але далеко не ідеальний.

 

Фінальне рішення: Використання Обгортки переповнення та дефіса.

Код CSS

.finalnoye-resheniye {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

 

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

 

Share

Останні пости

Антуан де Сент-Екзюпері

Ніколи не втрачай терпіння — це останній ключ, що відкриває двері Антуан де Сент-Екзюпері   Читати далі

28/03/2024

Сомерсет Моем

Подорослішавши, ви збагнете, що світ стає стерпним за однієї умови: коли розумієш, що людський егоїзм… Читати далі

27/03/2024

Михайло Грушевський

Всі вчаться своєї рідної мови, а наша біда така, що треба вчитися її більше, ніж… Читати далі

26/03/2024

ТОП-5 покерних обмінників

Професійний покер – це численні турніри та великі гроші, що потребує правильного налаштування фінансових інструментів.… Читати далі

25/03/2024

Гай Юлій Цезар

Всі довкола прагнуть винищити ворогів, а не об'єднатися з друзями Гай Юлій Цезар   Читати далі

24/03/2024

Як вибрати оптимальний смартфон для дитини?

Сьогоднішні діти стикаються з технологіями вже в ранньому віці, і смартфон давно перестав бути просто… Читати далі

22/03/2024