如何处理固定高度容器

Question

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

我经常看到我必须为后端开发人员进行sitebuild时，有一个固定高度的容器/层（如卡片或thubnail），你无法使用overflow: auto 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)