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>