美文网首页前端前端分享Web前端之路
《图解CSS3》学习记录(03-文本省略与换行)

《图解CSS3》学习记录(03-文本省略与换行)

作者: 石宝宝 | 来源:发表于2017-05-10 09:18 被阅读14次

    文本省略:

    通常在页面有限区域要显示较多内容的时候,可以使用文本省略。

    使用text-overflow:ellipsis;配合white-space:nowrap、overflow:hidden属性一起使用,可以代替文本截取函数。这样做的最大有点是有助于搜索引擎的搜索。

    单行文本省略css

    word-wrap:

    word-wrap属性实现长单词与URL地址的自动换行。word-wrap属性有两个值:

    normal:浏览器默认值,浏览器只在半角空格或连字符的地方进行换行,长文本和URL地址都会超出容器的边框。

    break-word:将内容在边界内换行(行末不会截断英文单词换行,但是当一行的宽度比长文本或者URL的长度短时,会被截断成两行或多行显示)。

    中文都会自动换行。

    word-break:

    word-break用来决定自动换行的处理方法,共有三个值:

    normal:中文到边界上的汉字换行,英文从整个单词换行;

    break-all:可以强制截断英文单词,达到词内换行的效果。

    keep-all:不允许字断开,中文把前后标点符号内的一个汉字短语整个换行,英文单词整个换行;

    相关文章

      网友评论

        本文标题:《图解CSS3》学习记录(03-文本省略与换行)

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