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

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

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

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

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

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

Ответы

Ответ 1

Вы можете использовать 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;
}

Я тестировал это в: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15

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

Ответ 2

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

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

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

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

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

Ссылки

Дальнейшее чтение