防止文本区域或 contenteditable div 中一定行数后换行

Question

我想创建一个具有最大行数的

text area

或

contenteditable div

（最好是

text area

），其中，当达到最大行数时，不会添加新换行符，并且所有新文本都会被隐藏（但仍然存在）。

我尝试过使用

text areas

和

contenteditable div's

，并且我已经能够让它们在最大行数后停止调整大小，但添加的新内容仍然会导致换行并将现有文本推出视图。

对于一个粗略的演示：

当前（最大行数为 3）：

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

想要

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

这是我迄今为止所拥有的一个小提琴：fiddle

Answer 1

经过更多研究，似乎这是不可能的，使用自定义元素可能更好。

我最终使用了文本区域的

maxlength

属性，因为我意识到我已经阻止用户使用 Enter 创建新行，因此文本区域中的字符数足够准确，可以使用。