CSS里设置只显示固定行的文本的方法及在线实例演示亲测 收藏


  • :
  • 01-20 22:23
  • :
  • 3次
  • :
  • 0条
  • 0赞

简介用CSS设置网页里只显示指定行数的文本内容,超出部分用省略号表示的方法,及在线实例演示。

我们在做WEB开发时,可能需要在网页的某个地方实现“只显示指定行文本,超出后用省略号代替”,像下面这样的效果:

其实要实现这个效果是很简单的,原理就是:

//比如我们要只显示三行文本:
设置一行文本的高度,line-height:1.2rem;
设置总高度,line-height*3,如:height:3.6rem;
然后加上超出隐藏就可以了,overflow-hidden;

上面的只能实现“显示三行文本,超出后隐藏”的效果,如果我们要在文本的末尾显示上省略号,需要再加下下面这几个属性:

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;//如果显示三行 就是3 ,显示二行,就是2

下面是一个完整的实例:

<style type="text/css">
    .onlyshow3 {
        height:4.5rem;
        line-height:1.5rem;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
        overflow:hidden
    }
</style>

可以点下面的链接查看站长提供的在线实例演示:

CSS 只显示三行文本 超出后用省略号显示



您正在找的文章可能是: