I want to create a text area or contenteditable div (preferably a text area) that has a max number of lines where, when hitting the max line, no new line breaks are added and all new text is hidden (but still exists).

I have tried using both text areas and contenteditable div's and I have been able to get them to stop resizing after max lines but new content that is added still causes line breaks and pushes existing text out of view.

For a crude demo:

current (max lines is 3):

aaaaaaaaaaaaaaaaa (text gets hidden because of max lines)
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaa (overflows to a new line)

wanted

aaaaaaaaaaaaaaaa (text is still visible)
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (continues on the same line, getting hidden but still exising)

Here is a fiddle with what I have so far: fiddle