Каков наилучший способ разбить текст HTML на косые черты (/)? - PullRequest
Новая
       39

Каков наилучший способ разбить текст HTML на косые черты (/)?

29 голосов
/ 18 ноября 2011

У меня есть HTML-таблица шириной 360px, которая прекрасно работает.Проблема в том, что иногда в тексте появляется URL http://this/is/a/really-really-really-really-really/long/url.Это приводит к горизонтальному расширению таблицы и появлению полосы прокрутки внизу.

Я не думаю, что overflow:hidden будет работать, поскольку половина текста будет скрыта.

Что такоелучший способ заставить разрыв строки на слешах (/) и тире (-) в CSS (надеюсь)?

Должно работать с IE7 +, Chrome, Firefox и Safari.

Работа в Rails 3 и jQuery.

Ответы [ 2 ]

39 голосов
/ 14 февраля 2014

Хотя css word-wrap: break-word; работает, его реализация в разных браузерах отличается.

Если у вас есть контроль над контентом и вы хотите точные точки останова, вы можете вставить

  • a<wbr> разрыв слова (поддерживается во всех основных браузерах, кроме IE8 CanIUse.com );
  • &#8203; пробел нулевой ширины (U + 200B) - безобразно в IE <= 6 </li>
  • &shy; мягкий дефис - хотя, конечно, это добавляет дефис при разрыве, что не всегдачто нужно.

У меня есть большая корпоративная база пользователей, которая все еще должна использовать IE8, поэтому, когда я столкнулся с этой проблемой, я использовал C # someString.Replace("/", "/&#8203;") в коде на стороне сервера.

Понятно: если вы вставляете пробел нулевой ширины в адрес электронной почты, когда пользователь копирует и вставляет в свой почтовый клиент, пробел тоже копируется, и электронная почта не удастся, и пользователь не сможет понять, почему (пробел равен нулю ширины ...)

Ссылки

Дополнительная литература

14 голосов
/ 18 ноября 2011

Вы можете использовать word-wrap : break-word; примерно так: 

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

div {
    width : 50px;
    border : 1px solid #000;
    word-wrap : break-word;
}

Я проверял это в: IE 6 / 7/8, Firefox 7, Opera 11, Safari 5, Chrome 15

Вот jsfiddle: http://jsfiddle.net/p4SxG/

...