Question

Possible Duplicate:
CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML

Lets say one has the following code:

<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>

I apologize but stack overflow (according to the preview) does not line break code snippets.

Under most (?) circumstances, the following will cause the container that holds the long line of text to stretch to the full width of the text contained within.

We would like to force this to line break (even mid word) according to the css specified width (width:100px) of the parent container.

Is this possible via a css tag I do not know about?

IE6+ comparability, plus gecko/webkit/opera please.

Answer 1

Modern (CSS3) answer, that now works in all browsers:

.wrap {
  overflow-wrap: break-word;
}

Note that you may need to add overflow:hidden and/or width:100% to a parent/ancestor element.

---

Old answer:

.wrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}