воскресенье, 19 июля 2015 г.

HTML: Перенос длинных слов

Оригинальный текст можно прочесть здесь.
Я нагуглил следующие способы решения проблемы с длинными словами, которые ломают верстку:
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) Использовать специальные символы для разделения длинных слов на более короткие. Вот эти символы: &shy; &#8203; <wbr>
Пример спользования в Ruby on Rails https://gist.github.com/fiftin/004b70ac0fc0a72738f8.
Каждый из этих сиволов имеет свои недостатки:
  • &#8203;  - представляют собой невидимый пробел который разделяет слово на отдельные слова. По-этому при двойном щелчке мыши по слову, выделяется не полностью слово, а только его часть
  • &shy; &#8203; - копируются вместе с тектом хоть и невидимы для пользователя. Проблема может возникнуть, если пользовтель пытается использовать скопированный текст (содержащий один из этих символов) для поиска.
  • <wbr> - не имеет описанных выше недостатков, но он не поддерживается Internet Explorer'ом.
3) Если ширина div'ки с тектом фиксирована, то достаточно использовать для нее такой стиль:
div {
    width: 100px;
    word-wrap: break-word;
}

Комментариев нет:

Отправить комментарий