css 设置 多行超出 显示为 省略号 ,可 多行超出 显示为 省略号

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiao_yu_liu/article/details/56675554

开发过程中我们可能会遇到这样的需求:

        有一行文本,不足一行,全部显示,超出一行,行尾显示为省略号。

可能你会有些扫操作,用 JS 去动态的判断,尽管效果已经实现,但是看上去搓的一逼,配不上前端这个词。

下面给你介绍 两种 优雅的 方式 ,来实现这个效果。

 

HTML如下:

<div class="text-to">
       这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,
       这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,
       这是测试,这是测试,这是测试
</div>

1:一行,超出显示为省略号

.overflow-to-ellipsis{
    width: 200px;
    background: red;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

效果如图:

 

但是,某些时候,产品经理似乎总有改不完的需求和各式各样变态的需求。

比如,两行超出显示为省略号

再比如,三行超出显示为省略号

再比如......

2、多行,超出显示为省略号

备注:此方法兼容性不佳,safari 和 chrome 支持比较好,所以感觉在 移动端 比较好用吧

.text-to {
    background: red;
    color: white;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
     display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
   
}

效果如下: 

修改 -webkit-line-clamp 的 值,就可以控制行数。

 

亲测有效!亲测有效!亲测有效!

亲测有效!亲测有效!亲测有效!

亲测有效!亲测有效!亲测有效!

欢迎加微信 共同学习:

lzy2308023

没有更多推荐了,返回首页