美文网首页
css控制文字,超过部分显示省略号

css控制文字,超过部分显示省略号

作者: xilong | 来源:发表于2018-02-26 11:01 被阅读19次

    1、单行文本溢出出现省略号

    p{
        width: 100px;      /*为了兼容部分浏览器,需要设定宽度*/
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    

    2、多行文本溢出出现省略号

    因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;(在)

    p{
        width: 200px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;      /*设置具体的行数*/
        overflow: hidden;
    }
    

    相关文章

      网友评论

          本文标题:css控制文字,超过部分显示省略号

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