How to word-wrap a URL?

Question

Word wrap works well on long strings without any special characters. I'd like to use it on a URL. Rather than filling all the columns in a row, the text goes to the next row on encountering special characters like =, & etc. Is there some other method to solve this? HTML:

<div style="word-wrap: break-word; width:100px;" id="foo"></div>

JS:

var div = document.getElementById("foo");
div.innerHTML = "https://www.google.co.in/search?q=hello+world&ie=utf-8&oe=utf-8&gws_rd=cr&ei=aNqUVZ7ZK4KVuATI3IGIDg";

JS Fiddle here.

PS: Overflow isn't very nice!

Answer 1

Try using word-break: break-all;

var div = document.getElementById("foo");
div.innerHTML = "https://www.google.co.in/search?q=hello+world&ie=utf-8&oe=utf-8&gws_rd=cr&ei=aNqUVZ7ZK4KVuATI3IGIDg";

#foo{
  word-break: break-all;
}

<div style="width:100px;" id="foo">
    
</div>