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

Question

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

这里我有一个固定宽度和高度的div（外框）。我让它具有固定的宽度和高度，因为它是一个列表项，我希望它们是统一的。现在，我遇到了描述区域的问题。我希望它有包含多行的文本，如果它不适合，它会显示一个省略号。现在我打算严格设置font-size和line-height，以便在Description 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/

  

    

text-overflow：省略号仅在以下情况下发挥作用：

         

    
1. 除了可见之外，该框已溢出。
    
2. 该框有空格：nowrap。
       

Answer 2

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

Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

我选择使用插件jQuery dotdotdot。