How to migrate a url?

Question

Word wrap works fine on long lines without any special characters. I would like to use it at the url. Instead of filling in all the columns in a row, the text moves to the next row when it encounters special characters like =, etc. Is there any other way to solve this problem? 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 is here .

PS: Overflow is not 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>

Run codeHide result