Интернет состоит из контента, контент состоит из слов, а слова могут быть очень и очень длинными. И рано или поздно вебмастер сталкивается с проблемой переноса длинных слов. Эта проблема особенно актуальна для адаптивного дизайна, и для небольших блоков контента. Итак, как же справиться с этой проблемой?
Первое решение для переноса длинных слов – с помощью дефиса.
Код 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; }
Это решение позволит браузеру, который поддерживает его, вставлять дефис, а для не поддерживающих его браузеров вставлять разрыв строки.
Когда вы ставите перед собой цели, очень важно быть максимально конкретным. Здесь не поможет простая…
Современный человек думает, что теряет время, когда не действует быстро, однако не знает, что делать…
Уникальная элегантность и долговечность: почему стоит купить травертин и купить гранит в Барекс Мармур…
В современном мире, где каждый день от нас требуют быть в ресурсе, отвечать внешним ожиданиям…
Существует множество способов защитить свои данные в Интернете. Одним из лучших решений можно назвать виртуальную…
Реалии настоящего таковы, что все труднее становится оставаться приватным при просмотре веб-страниц, и это еще…
View Comments
Для ссылок не работает :(
Не обрезает, не разбивает...