Html 一个文本字段最多显示3行

目标：我希望在定义宽度的

中显示最多3行长文本字段

当前有缺陷的方法：

div{
宽度：50%；
高度：100px；
填充：10px；
空白：正常；
溢出：隐藏；
文本溢出：省略号；
-o-text-overflow：省略号；
}

---

问题：如果没有与任意100px+20px的高度完美对齐，则上述内容会切断底线。因此，我经常以一行文字结束，这些文字被水平截断了一半。我怎样才能显示多达3行的文本而不是将其截断？

使用

em

，而不是

px

作为

高度。因此，像
3em
或
3.12em
这样的东西可以使它恰到好处（也适合填充）。
使用
em
，而不是
px
来表示
高度。因此，类似于
3em
或
3.12em
的东西，以使其恰到好处（同时满足填充要求）。
我在一个更大的分区内放置了这个
div
，以像素为单位。如果我使用
em
，我担心这个小的会超过大的。有什么办法吗？我刚把高度改成
em
。如果文本仍然超过3行，有没有办法保留省略号？我把这个
div
放在一个以像素为单位的大文本中。如果我使用
em
，我担心这个小的会超过大的。有什么办法吗？我刚把高度改成
em
。如果文本仍然超过3行，有没有办法保留省略号？
<style>
  div{ 
    width:50%;
    height:100px;
    padding:10px;
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
  }
</style>


<div>
  <%= @company.description %>
</div>