html - 根据固定高度和宽度剪切文本

Question

我想知道以下结构是否可行。

这里我有一个固定宽度和高度的 div（外框）。我使它具有固定的宽度和高度，因为它是一个列表项，我希望它们是统一的。现在，我遇到了描述区域的问题。我希望它的文本可以换成多行，如果不合适，它会显示一个省略号。现在我打算严格设置字体大小和行高，以便在描述 div 中显示 2 行文本。它是否正确？我担心渲染会在某些浏览器上搞砸，并且设计可能非常脆弱。我也有点不确定如何使用纯 CSS 解决方案来实现省略号。我已经尝试过，text-overflow: ellipsis但无法让它正常工作。

老实说，我仍然不确定我是否走在正确的道路上。我在想这个结构可能已经有一个现有的/更好的解决方案。还有其他人这样做吗？任何帮助将不胜感激。谢谢。

这是 JsFiddle 链接：

http://jsfiddle.net/3kJWQ/4/

Answer 1

这似乎有效：

.description {
  height: 60px;
  font-size: 14px;
  line-height: 21px;
  overflow: hidden;
  border: 1px solid #000;
  text-overflow: ellipsis;
  white-space: nowrap;

}

来自：http ://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/

文本溢出：省略号仅在以下情况下起作用：

1. 盒子有溢出而不是可见的。
2. 盒子有空格：nowrap。

Answer 2

我从这个问题中得到了解决方案：

跨浏览器多行文本溢出，省略号附加在宽度和高度固定的 div 中？

我选择使用插件 jQuery dotdotdot。