Перенесення довгих слів за допомогою 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

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

Федір Достоєвський

Жити потрібно для тих — кому ти потрібен, Дружити лише з тими — в кому… Читати далі

19/09/2021

Том Гіддлстон

Людина має два життя, і друге починається тоді, коли ми розуміємо, що життя всього одне… Читати далі

12/09/2021

Еріх Марія Ремарк

В темні часи добре видно світлих людей Еріх Марія Ремарк   Читати далі

07/09/2021

Юрій Нікулін

Ніколи не мстіть підлим людям. Просто станьте щасливими, — І вони цього не переживуть... Юрій… Читати далі

02/09/2021

Конфуцій

Стався до всіх з добром та повагою, навіть до тих, хто з тобою грубий. Не… Читати далі

29/08/2021

Створи справжнє дзеркало суспільства: найкращі WordPress шаблони для новинного порталу

Створення новинного порталу може здатися важкою справою, враховуючи розмір та охоплення таких великих компаній як… Читати далі

21/08/2021