CSS 实现文字溢出显示省略号效果

需求描述

还是在做微信小程序的时候,碰到的一个需求,具体外壳就懒得搬了,就是需要做到

多行文本溢出显示省略号效果

emmmmmmmm……本宝需要想一想怎么做,用CSS的text-overflow: ellipsis属性可以很方便的实现单行文字溢出的省略效果,但是这是多行文字溢出的省略号效果

方案论证

~^_^~ 一本正经的开始扯淡

CSS方案

  1. webkit内核的浏览器

    -webkit-line-clamp可以用来限制一个块元素中显示文本的行数,但是呢,需要结合其他的属性。

     display: box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
    

    这是完整的代码,当然你也看到了,这些加了-webkit前缀,为了保证效果,还要设置一下元素的高度和行高,保证元素的高度除以行高等于要显示文本的行数,即使不在webkit内核的浏览器预览,虽然没有了省略号效果,但是也不至于导致样式错乱

  2. 跨浏览器实现方案

    在CSS中,有两个特殊的伪元素beforeafter,他们有一个属性叫content

     p{
         position: relative;
         line-height: 1.4em;
         font-size: 1em;
         height: 4.2em;
         overflow:hidden;
     }
     p:after{
         content: "……"
         position: absolute;
         right: 0;
         bottom: 0;
     }
    

    这样就会在p标签后面加上一个省略号了,但是同样存在问题:

    • 这个省略号是一直存在的,如果文本元素不足三行,显示的效果会贼尴尬。

JS方案

因为这是在做微信小程序的时候遇到的一个很有意思问题,因为微信小程序在写法上很像vue,然后使用的也是数据驱动。所以就会有这么一个不是那么优雅但是会蛮好使的方法:

直接改动要渲染的数据就好了,数一下每行会有多少个字,计算一下然后整个判断,截取一下数据就OK

推荐定宽,原因不解释。(逃。。。。。)

Table of Contents