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