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

Try this:

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

Answer 2

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

.span9 {
    width: 700px;
    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.