如何处理固定高度容器中的文本溢出

Question

我只是在想，在固定高度的布局中有没有办法处理文本溢出与动态文本？

我经常看到，当我必须为后端开发人员建造sitebuild时，有一个固定高度的容器/图层（如卡或thubnail），因为你不能使用css属性，因为设计不允许它。

让我们假设我将使用ellipsis，但文本可以是2行。 我可以使用:after或:before伪，但是如果我创建的点会在文本上溢出，或者被推出容器？ 如果我使用Javascript并且最大限度地增加字符数量，它会打破这样的世界：Hello worl...。 是的，我们可以最大化每个字段中后端的字符，但有时在较小的设备（平板电脑，手机）中无法正常工作。

这是一个jsfiddle如果我没有以良好的方式告诉我在想什么。

我的问题是，解决这个问题的最佳做法是什么？

Answer 1

你尝试线钳

.line-clamp { 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
} 

看看这个网址以获得更多帮助 Line Clampin’ (Truncating Multiple Line Text)