Forcing a long line of text (without spaces) to line break according to parent containers static width using CSS [duplicate]
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.
You can use this to wrap :
.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 */
}
A combination of word-wrap
and word-break
may solve this for you. See How to force a line break in a loooooong word in a DIV? (possible dupe)