关于p元素无法自动换行的问题

代码：

  <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;为准。