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.

css wordwrap: break-word; InterNet Explorer breaks word when the word exceeds the width at position where the character exceeds the limit. wbr cant be used for breaking words. its used inside of nobr blocks to break sentences but not words — , May 20 '14 at 10:28
As they always say – “~~Don’t~~ be [shy](https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Suggesting_line_break_opportunities)” — CBroe, May 20 '14 at 11:06

score 41 · Accepted Answer · answered May 20 '14 at 12:01

41

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  that browsers have largely spoiled (a sad story).

Alternatively, you can replace  tags by that character, which you can write in HTML as .

answered May 20 '14 at 12:01

Jukka K. Korpela

195,524
37
270
390

1

Added `` where word breaks are possible. In my case after underscores (`_`). Works perfect in IE11 and Chrome 42 – phse Apr 22 '15 at 14:34
1

wbr:after does not seem to work for IE11, because I believe would be considered an empty tag. According to this post: https://stackoverflow.com/a/24702765/2499165 most browsers don't implement :after for empty tags. – jessewolfe Sep 29 '17 at 05:34
Also works for truncated tooltips if you insert `\u200b` chars – user9645 Dec 07 '18 at 15:17

score 4 · Answer 2 · edited May 23 '17 at 12:09

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

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

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

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

wbr tag doesn't work in IE

2 Answers2

Linked