美文网首页
CSS长文本溢出自动换行

CSS长文本溢出自动换行

作者: 荒剑离 | 来源:发表于2020-03-09 06:48 被阅读0次

    经常会有一些长单词或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

    相关文章

      网友评论

          本文标题:CSS长文本溢出自动换行

          本文链接:https://www.haomeiwen.com/subject/lfibrhtx.html