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/

score 10 · Answer 1 · edited Jun 26 '13 at 14:57

10

Try this:

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

edited Jun 26 '13 at 14:57

orokusaki

55,146
59
179
257

answered Feb 16 '12 at 09:19

Ketan Modi

1,780
1
16
28

@ Ronak - This does indeed work, I updated the OP's jsfiddle: http://jsfiddle.net/kSCa3/5/ – SimonDowdles Feb 16 '12 at 09:24
It should be cautioned that while most are recommending word-wrap and word-break, these are both CSS3 properties and this could become a compatibility nightmare. – SimonDowdles Feb 16 '12 at 09:29
add this `word-wrap: break-word;` also. This might make compatible on every browser – Ketan Modi Feb 16 '12 at 09:38
You can also visit [CanIUse](http://www.caniuse.com/#search=word-wrap) to resolve browser compatibility issues. – Ketan Modi Feb 16 '12 at 09:41

score 9 · Accepted Answer · answered Feb 16 '12 at 09:18

9

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

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

answered Feb 16 '12 at 09:18

sandeep

91,313
23
137
155

i knew the solution but to ask this is bug / unintended thing with the library is it? then how come when u see the demo page on their servers the documentation with large text are perfectly fine and showing well – Deeptechtons Feb 16 '12 at 09:23
2

It's not a bug of any library is a normally happening when an text is to long without any space. – sandeep Feb 16 '12 at 09:30
& i presume this is CSS3, clip is css2 counterpart ? or am i wrong – Deeptechtons Feb 16 '12 at 09:35
it's not a part of css3 & it's work till IE6 check this https://developer.mozilla.org/en/CSS/word-wrap – sandeep Feb 16 '12 at 09:39

score 5 · Answer 3 · answered Oct 26 '12 at 19:15

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.

score 0 · Answer 4 · answered Feb 16 '12 at 18:38

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

}

CSS text overflows ooh man what a mess

JsFiddle

4 Answers4