Text Spill Out of Div Using 960 gs

Question

I'm using the 960 gs CSS framework and I'm having problem with the text spilling out of the div. How do I make the text make another line after it reaches the max number of pixels per gri?. ex. .grid_4 width is 220 px. a new line should be created after the text reaches 220 px in width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="960.css" rel="stylesheet" type="text/css" />
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link href="text.css" rel="stylesheet" type="text/css" />
  </head>
  <div id=container class="container_12">
    <div id=header class="grid_4 suffix_4">
      ian
    </div>
    <div id=header class="grid_4">
      <p>assddjklaldakljdlajdlajdjajdlajldjaljdajdlajdkljakldjklajdkladkladjakldjakldjkladlajdkladkljadjakldkladasldjad</p>
    </div>
  </div>
  <body>

  </body>
</html>

score 2 · Accepted Answer · answered Feb 14 '12 at 19:56

There is nothing specific to 960 about this.

By default, you will only get word wrapping when there is a word break character (such as a space).

You can override this with the word-wrap property.

e.g.

p { 
    word-wrap:break-word;
}

… but you are usually better off ensuring that you don't have very long strings of characters without word breaks among them.

score 0 · Answer 2 · edited May 23 '17 at 11:48

in addition to word-wrap:break-word, you can also use the css3 attribute word-break http://www.css3.com/css-word-break/, however as they are css3, older browsers/IE may not give great results. The other option is to set a overflow:hidden; or use javascript to breakup the word.

for the difference between word-wrap and word-break take a look at What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

Text Spill Out of Div Using 960 gs

2 Answers2