CSS长文本溢出自动换行

经常会有一些长单词或URL,因为长度过长以致一行放不下,就会导致文本溢出。
要么出现滚动条,要么会被截断看不见。

为了应对这种情况,可以使用css的word-wrap属性。

p.test {word-wrap:break-word;}
/* 这样就允许长单词换行到下一行了 */

所有主流浏览器都支持 word-wrap 属性 [1]。

但值得注意的是,word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法 [2]。

因此,由于历史原因,当你使用 <' overflow-wrap '> 时,最好同时使用 <' word-wrap '> 作为备选,作向前兼容 [3]。

参考资料

[1] CSS3 word-wrap 属性
[2] overflow-wrap - mozilla
[3] overflow-wrap

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

推荐阅读更多精彩内容

  • 总览 边框border-color 属性boder-image 属性border-radius 属性box-sha...
    DecadeHeart阅读 4,617评论 0 9
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,842评论 0 11
  • (一)-webkit-tap-highlight-color 想要禁用这个高亮,设置颜色的alpha值为0即可。 ...
    毛线内裤阅读 3,352评论 0 0
  • CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 4,897评论 0 0
  • 欢迎访问我的博客https://qqqww.com/,祝所有码农同胞们早日走上人生巅峰,迎娶白富美~~ 详细请移步...
    这里王工头阅读 5,505评论 0 16