Basically I've made in jsfiddle the kind of thing I'm looking for. But it's meant using a contenteditable div rather than textarea. I don't mind if the div is 100% width, but I'd like the height 38px (to represent 2 lines of text).
The problem I'm finding is preventing more text from being entered when the entire area is already filled. Obviously I don't want to restrict this based on number of characters (and if I did that, I may as well use a mono-spaced font).
Any thoughts?
https://jsfiddle.net/v358Lpoq/2/
HTML...
<div class="writebox">
<div class="writeboxprefix">Comments:</div>
<div class="writeboxtext" contenteditable="true">
Lorem ipsum dolor si wdq wd qwdq wqd wqddwqe dwqdwq wdq wqd
wdq wqd wqd wqd wdqt
</div>
</div>
CSS...
.writeboxprefix {
height: 16px;
float: left;
background: white;
font-style: italic;
padding-right: 6px;
}
.writeboxtext {
background-attachment: local;
background-image: repeating-linear-gradient(white, white 15px, black
15px, white 16px, white 19px);
height: 38px;
resize: none;
}
.writebox {
font-family: Arial;
font-size: 10pt;
line-height: 19px;
display: block;
overflow: hidden;
}