CSS text overflows ooh man what a mess

Question

I compiled this jsFiddle demo so that you can see what i am going throw. Using the Twitter Bootstrap 2 i thought everything was fine and simple things were taken care until i hit with this. I don't understand if the markup is not right or the library doesn't handle this but the text when long just overflows out of screen/container

JsFiddle

http://jsfiddle.net/kSCa3/2/

Answer 1

Add word-wrap: break-word in your DIV. Write this:

.span9 {
    width: 700px;
    word-wrap: break-word;
}

Answer 2

Try this:

div {
  word-break: break-all;
  word-wrap: break-word;
}​

Answer 3

I have just spent almost an entire day trying to solve this, and the above didn't work until I discovered this:

Make certain you also have fluid containers INSIDE the floated div:

<div class="container-fluid">

Otherwise it'll stay the same width and will spill over .. no matter what you do.

Answer 4

maybe, you can try this too :

div.span9{
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */

}