微信页面文本溢出显示省略号无效

Question

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

chrome正常

微信内置浏览器不支持

Answer 1

已解决
通过引用shave解决

• 安装

  npm install shave --save

• 引入

  import shave from 'shave';

• 处理

  shave('selector', maxheight)

  我的实现

      ...
      import shave from 'shave'
      ...
      updated () {
          shave('.video-desc', 40)    
          shave('.ellipsis', 400)
      },
      ...

Answer 2

单行文本溢出的话这样就够了

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

当然宽度要固定好

Answer 3

没试过这个吗，还是也不行？我们项目都是这样的，暂时没发现问题
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
这个是支持多行的