Я нагуглил следующие способы решения проблемы с длинными словами, которые ломают верстку:
1) http://slopjong.de/2013/06/18/how-to-word-wrap-text-in-html/
div {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;
word-wrap: break-word;
}2) Использовать специальные символы для разделения длинных слов на более короткие. Вот эти символы: ­ ​ <wbr>
Пример спользования в Ruby on Rails https://gist.github.com/fiftin/004b70ac0fc0a72738f8.
Каждый из этих сиволов имеет свои недостатки:
- ​ - представляют собой невидимый пробел который разделяет слово на отдельные слова. По-этому при двойном щелчке мыши по слову, выделяется не полностью слово, а только его часть
- ­ ​ - копируются вместе с тектом хоть и невидимы для пользователя. Проблема может возникнуть, если пользовтель пытается использовать скопированный текст (содержащий один из этих символов) для поиска.
- <wbr> - не имеет описанных выше недостатков, но он не поддерживается Internet Explorer'ом.
3) Если ширина div'ки с тектом фиксирована, то достаточно использовать для нее такой стиль:
div {
width: 100px;
word-wrap: break-word;
}
Комментариев нет:
Отправить комментарий