Wbr Tag Doesn't Work In Ie

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; }

Wo&l

Solution 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 ​.

Solution 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.

Share