Erlo

CSS实现单行、多行文本超出部分显示省略号

时间:2019-02-11 18:03   阅读:27次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

 单行文本超出,代码如下:

css代码:

<style>
        .one{
            width:200px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
</style>

 

效果如下:

 

多行文本超出部分显示省略号

代码如下:

<style>
         .more{
            line-height:18px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;       
        }
</style>

效果图如下;

注意事项:

  • 将height设置为line-height的整数倍,防止超出的文字露出。
  • -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

 

下一篇:HTML复习 2019-2-11

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-02-17 19:00:34Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 Erlo动态 案例展示 搜索
    鼠标试试
    返回顶部