Forcing a long line of text (without spaces) to line break according to parent containers static width using CSS

Css

Css Problem Overview


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

Css Solutions


Solution 1 - Css

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 */
}

Solution 2 - Css

A combination of word-wrap and word-break may solve this for you. See https://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-loooooong-word-in-a-div (possible dupe)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionanonymous-oneView Question on Stackoverflow
Solution 1 - CssMr. AlienView Answer on Stackoverflow
Solution 2 - CssPaul FlemingView Answer on Stackoverflow