美文网首页
CSS 实现单行、多行文本溢出显示省略号

CSS 实现单行、多行文本溢出显示省略号

作者: George2016 | 来源:发表于2017-08-01 18:09 被阅读35次

一、单行文本的溢出显示省略

用text-overflow:ellipsis属性。

#div1 {
    //关键代码
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    width: 200px;
    height: 100px;
    background-color: #ef0;
}

二、多行文本的溢出显示省略

#div2 {
    //关键代码
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    
    line-height: 20px;
    width: 200px;
    height: 60px; //这里的高度为行数*行高;3*20;
    background-color: #fdd;
}

相关文章

网友评论

      本文标题:CSS 实现单行、多行文本溢出显示省略号

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