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 = "+world&ie=utf-8&oe=utf-8&gws_rd=cr&ei=aNqUVZ7ZK4KVuATI3IGIDg";

JS Fiddle here.

PS: Overflow isn't very nice!

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!

• javascript
• jquery
• html
• css

• 3 what should be your output? – Sudharsan S Commented Jul 2, 2015 at 6:41
• 1 And should it be cut and pastable? – mplungjan Commented Jul 2, 2015 at 6:41
• 1 dotnet-tricks./Tutorial/css/… – mplungjan Commented Jul 2, 2015 at 6:43
• 1 If you didn't need it to be cut-and-pasteable, you could insert zero-width spaces (U+200B, \u200B in JavaScript) in the string where you're happy for it to break. But they'll e with the string when copy-and-pasting, so... – T.J. Crowder Commented Jul 2, 2015 at 6:44

1 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>