В IE не работает тег wbr

Мягкий перерыв, похоже, не работает в IE. Есть ли альтернатива или как заставить ее работать?

http://fiddle.jshell.net/88q54/1/

body {
font-size: 272px;    
}


<div>W<wbr/>o<wbr/>r<wbr/>d</div>

Я хочу, чтобы "слово" было разбитым, когда оно не соответствует ширине окна. Работа завершена в webkit и mozila, но не в IE (10/11).

Я знаю, что для сделанных слов breakable я могу использовать css word-break: break-all;

но я хочу, чтобы уметь мягко ломаться в определенном положении слова, поэтому css word-break не работает правильно для меня.

Ответы

Ответ 1

Добавьте в свою таблицу стилей следующее:

wbr:after { content: "\00200B"; }

Вставляет U + 200B ZERO WIDTH SPACE, который является символом уровня символа старого старого <wbr>, который браузеры в значительной степени испорчены (печальная история).

В качестве альтернативы вы можете заменить теги <wbr> на этот символ, который вы можете записать в HTML как &#x200b;.

Ответ 2

Jukka answer является хорошим. Однако в приведенном ниже случае желательно, чтобы пользователь мог скопировать текст, который является адресом электронной почты. В этом случае символ &#x200b; не может проникнуть в строку. Поэтому его нужно решать по-разному, используя несколько встроенных элементов (например, <span> или <i>) с помощью display: inline-block;.

В этом случае теги <i> окружают компоненты адреса электронной почты, заканчивающиеся на ., или начиная с @.

.wbr-i-container i {
  display: inline-block;
  font-style: inherit;
}

<a class="wbr-i-container"
><i>FirstName.</i
><i>MiddleName.</i
><i>LastName</i
><i>@company.</i
><i>com</i
></a>

<i> используется для краткости и удобочитаемости, тогда как <span> будет семантически корректным.

Работает в текущих версиях Chrome, Firefox, IE и Safari.