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;    
         


        

Answer 1

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. or ) with display: inline-block;.

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

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

FirstName.MiddleName.LastName@company.com

is used for brevity & readability, while would be semantically correct.

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