css 怎么在第二行显示省略号 (兼容火狐/IE)

Question

再写一个vue项目，一般多行显示都使用如下

text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;     /*第几行显示省略号*/  
-webkit-box-orient: vertical;

但是这个并兼容火狐和IE，请问要怎么兼容这些浏览器？

Answer 1

display: -webkit-box;这个属性firefox和ie是不兼容的，
如果要做第二行超出省略，建议使用js控制。

Answer 2

flex你就按标准的写，编译时会帮你兼容的
-webkit-line-clamp这个是兼容不了的

Answer 3

可以考虑写两个div和一个默认值为false的参数a，第一个div只有一行且不限宽度，放所有文字内容，生成页面时判断是不是超过限定width值，如果超过了修改width为限定值并且overflow：hidden掉，然后给参数a=true。第二个div里面只写省略号，v-show="a"，当a为true时才显示。
我是这个想法，有点复杂，逻辑很简单，能不能实现不知道，但是我觉得应该可以吧

Answer 4

不贴代码了，该问题已经有解决过了

如何控制文本只能显示两行，多余的截取为省略号，要求纯css实现，兼容主流浏览器（含IE 8）...