Category Archives: Internet Explorer

IE 11 – Word Wrap or Word Break not working for Long Word or Overflowing Text

by ,

If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:

word wrap or break overflowing width of container

There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character ​.

CSS


#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

.break {
  word-wrap: break-word;
}

HTML


<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr&#8203;afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong&#8203;websiteurl&#8203;.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

You have to insert the unicode character whereever you want the breaks to occur. See the final result below.

word wrap or break in IE 11 with zero space unicode character