Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 16.04.2024)
455340
солдат
347
самолетов
325
вертолетов
7189
танков
13809
ББМ
11609
артиллерия
759
ПВО
1046
РСЗО
15563
машин
26
корабли и катера
Перенос длинных слов с помощью 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;
}

 

Это решение позволит браузеру, который поддерживает его, вставлять дефис, а для не поддерживающих его браузеров вставлять разрыв строки.

 

 

1 комментарий для “Перенос длинных слов с помощью CSS

  1. Дмитрий

    Для ссылок не работает 🙁
    Не обрезает, не разбивает…

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *