How to make a textarea ellipsize?

I've tried applying the following CSS to my textarea:

overflow: hidden;
text-overflow: ellipsis;

The existing CSS on my textarea is:

white-space: pre-wrap;
font-size: 12px;
width: 100%;
border: 0;
line-height: 15px;
height: 34px;
min-height: 34px;
resize: none;

I also have some jQuery applying fadeIn, fadeOut, and animate to a specific height.

I can't seem to figure out why the textarea won't ellipsize!

This styling was previously applied to a div, but now I need to use a textarea, so it doesn't ellipsize correctly. Ideally, the textarea would show max 2 lines of text and then add an ellipsis if there are more lines of text. I don't want horizontal scrolling, so 'nowrap' doesn't really help me...