Перенос длинных слов с помощью 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;
}

 

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

 

Recent Posts

Google Search Console – Проблема с LCP и как ее решить

Недавно мы писали о нововведении в инструменте для вебмастеров Google Search Console – Основных интернет-показателях. Поскольку… Read More

18/01/2021

Как изменить HTML код встроенных элементов WP oEmbed в WordPress?

Начиная с WordPress версии 2.9 в движок была добавлена поддержка oEmbed – формат простого API,… Read More

16/01/2021

Многофункциональное устройство коверлок: ключевые особенности

Существует много разновидностей швейного оборудования, которые открывают большие возможности для совершенствования навыков. Один из самых… Read More

15/01/2021

Как сделать отложенную загрузку для HTML, iframe и встроенного видео

Ленивая (или отложенная) загрузка (Lazy loading) – это популярный метод асинхронного обращения к адресу ресурса,… Read More

13/01/2021

Google Search Console – Проблема с CLS и как ее решить

Мы ранее писали о нововведении в инструменте для вебмастеров Google Search Console – Основных интернет-показателях.… Read More

11/01/2021

Самые красивые водопады мира (часть 3/3)

Водопад является одним из самых волнующих и красивых творений матушки-природы в нашем мире. По всему… Read More

08/01/2021