防止输入的文本超出可编辑的div静态大小

Question

基本上，我在jsfiddle中完成了我想要的东西。但这意味着使用内容可编辑的div而不是textarea。我不介意div是否为100％宽度，但我希望高度为38px（代表两行文字）。

我发现的问题是当整个区域都已填充时，阻止输入 more 文本。显然，我不想根据字符数来限制它（如果这样做，我也可以使用等宽字体）。

有什么想法吗？

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