Question

我正在使用960 gs CSS框架，而且我遇到了文本溢出div的问题。如何在文本达到每个gri的最大像素数后再创建另一行？恩。 .grid_4宽度为220像素。在文本宽度达到220像素后，应创建一个新行。

<!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>

Answer 1

关于这一点，960没有具体的内容。

默认情况下，只有在有分词字符（例如空格）时才会自动换行。

您可以使用word-wrap属性覆盖此内容。

e.g。

p { 
    word-wrap:break-word;
}

...但你通常最好不要确保你没有很长的字符串而没有断字。

Answer 2

除了自动换行：break-word之外，你还可以使用css3属性word-break http://www.css3.com/css-word-break/，但是因为它们是css3，旧的浏览器/ IE可能不会给出很好的结果。另一种选择是设置溢出：隐藏;或使用javascript来分解这个词。

有关自动换行和分词的区别，请查看What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

使用960 gs文本溢出Div

2 个答案: