CSS text overflows ooh man what a mess

css text overflow twitter-bootstrap typography
Deeptechtons picture Deeptechtons · Feb 16, 2012 · Viewed 7.9k times · Source

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

Ketan Modi picture Ketan Modi · Feb 16, 2012

Try this:

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

Related questions

Limit text length to n lines using CSS

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically). text-overflow: ellipsis; only works for 1 line text. original text: Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, …

Read More
How can I make text appear on next line instead of overflowing?

I have a fixed width div on my page that contains text. When I enter a long string of letters it overflows. I don't want to hide overflow I want to display the overflow on a new line, see below: &…

Read More
Can overflow text be centered?

When I specify text-align:center for an element with a width that is greater than the width of the text, the text is centered within the content box of the element (as expected). When I specify text-align:center for an …

Read More