代码:
<div class="container">
<div id="about">
<p>111111111111111111111111111111111111111111111111111111111111111111111</p>
</div>
</div>
效果:(采用栅格系统也一样)
解决方法:
p{
word-wrap:break-word;
// 或者 word-break: break-all;
}
释义:
1.white-space
:设置如何处理元素间的空白,默认为normal,表示空白会被浏览器忽略,white-space: nowrap;
表示不换行。
2.word-break
:规定自动换行的处理方法。normal:使用浏览器默认换行规则,break-all:允许在单词内换行,keep-all:只能在半角空格或连字符处换行。
3.word-wrap
:允许长单词或URL地址换行到下一行。normal:只在允许的断字点换行(浏览器保持默认处理),break-word:在长单词或URL地址内部进行换行。
word-break: break-all;
:
word-wrap: break-word;
:若两个属性同时存在,以
word-break: break-all;
为准。