wbr tag doesn't work in IE

Question

Soft break seems not to work in IE. Is there any alternative or how to make it work?

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

body {
font-size: 272px;    
}


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

I want the "word" to be breakable when it doesn't fit window width. The work is wrapped in webkit and mozila, but doesn't in IE (10/11).

I know that for made words breakable I may use css word-break: break-all;

but I want to be able to put soft break in certain position of the word so css word-break doesn't work correctly for me.

Answer 1

Add the following into your style sheet:

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

This inserts U+200B ZERO WIDTH SPACE, which is the character-level counterpart of the good old <wbr> that browsers have largely spoiled (a sad story).

Alternatively, you can replace <wbr> tags by that character, which you can write in HTML as ​.

Answer 2

Jukka's answer is a good one. However, in the case below, it's desireable to allow the user to copy the text, which is an e-mail address. In that scenario, the ​ character can't sneak into the string. It therefore has to be solved differently, using multiple inline elements (e.g. <span> or <i>) with display: inline-block;.

In this instance, <i> tags surround e-mail address components ending with a . or starting with a @.

.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> is used for brevity & readability, while <span> would be semantically correct.

Works in current versions of Chrome, Firefox, IE and Safari.