请教一个css问题

Question

这种第二行省略号后面加 支持优惠券这样的css 应该如何处理呢?

现在第二行省略用的是
`overflow: hidden;

text-overflow: ellipsis;

white-space: normal ！important;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;`

Answer 1

看着就蛋疼，建议把设计祭天

。。。或许你可以限定一下字数然后slice：

shownTitle = title.length > 50 ? title.slice(0, 50) + '...' : title;

Answer 2

多行自动缩略暂时不支持，只能自己想办法。

Answer 3

把。。。和优惠券写在一个div，给背景色，定位上去，把底下的文字遮住 /手动滑稽

Answer 4

可以直接放一个图片吗？

Answer 5

多行省略没遇到过欸，感觉应该不行吧？要是一定要这样做的话就可以取值是判断字符串长度，然后自己截取拼个...再放上去

Answer 6

想了一个实现方式

direction: rtl;
text-align: right;
padding-right: 100px; // 省略号和图片的宽度
text-indent: -100px;
width: 300px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

页面效果如下

最后和楼上老哥说的一样把省略号和图片定位在后边。
但是前提是必须溢出的，不然左侧就空出来了。。。