Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 11.10.2024)
666340
осіб
369
літаків
329
гелікоптерів
8953
танків
17800
ББМ
19322
артилерія
976
ППО
1229
РСЗВ
26398
машин
28
кораблі і катери
Перенесення довгих слів за допомогою 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;
}

 

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

 

 

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

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


Швидкий доступ по сайту SebWeo
Пригости мене кавою