The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!

Solution to the ‘Div breaks because of long string’ issue

IE Solution

Add the following to your styled div and you’re done. This is IE specific however.
word-wrap: break-word;

Solution for other browsers
Use JavaScript to break the string after a certain length.

// ========= browser detect ==========
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring, place;
if (!BrowserDetect('msie')) 
  {browser = "Internet Explorer"} 
else
  { browser = "Other"; }
function BrowserDetect(string)
  {
    place = detect.indexOf(string) + 1;
    thestring = string;

    return place;
  }

//========= string handle ============
// split long string to show correctly in browsers except IE
function LongStringHandler(astr, bint)
  {
    var k, i;
    var cstr = "";

    if ((astr.length <= bint) || (BrowserDetect('msie')))
      {document.write ( astr + '<br />' );} 
    else 
      {
        for ( i=0; i <= astr.length; i=i+bint) 
          {cstr = cstr + astr.substr(i, bint) + '<br />';}

          //return cstr;
        document.write ( cstr );
      }
  }

Reference:

word-wrap Attribute | wordWrap Property at MSDN
Alan Wood’s suggestion
Alan Wood’s example