Display up to 3 rows of a text field

Goal: I'd like to display up to 3 lines of a long text field in a <div> of defined width.

Current flawed approach:

<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>

Problem: The above cuts off the bottom line if it is not perfectly lined up with the arbitrary 100px+20px height. So, I often end up with a line of text halfway cut off horizontally. How can I instead display up to 3 whole line开发者_如何学Pythons of text instead of cutting it off?

---

Use em, not px for the height. So something like 3em or 3.12em to get it just right (cater for the padding as well).