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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择...
    张歆琳阅读 8,512评论 1 7
  • CSS3中的word-wrap、word-break、white-space想必大家都接触过,今天我们来一起温故而...
    叮咯咙咚DQ阅读 547评论 0 0
  • 当一个块状元素设置了宽度,并且其中的文本是根据接口返回的数据进行填充和展示时,因为传输的数据有可能是不可靠的,所以...
    lincimy阅读 3,713评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 不要着急不要着急不要着急 不要因为遇见困难就用分手解决 用时间去看清楚一个人而不是用耳朵听他说 远离自私的人 不要...
    NJ酒酒阅读 327评论 0 0