Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 04.07.2022)
36200
осіб
217
літаків
187
гелікоптерів
1589
танків
3754
ББМ
804
артилерія
105
ППО
246
РСЗВ
2629
машин
15
кораблі і катери
Перенесення довгих слів за допомогою CSS

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

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

Дефіс

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

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

Код CSS

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

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

Обрив слова

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

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

Код CSS

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

 

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

 

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

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

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

Код CSS

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

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

 

Три крапки

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

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

Код 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;
}

 

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.