javascript - 设置 contenteditable 元素的最大大小

Question

我想知道是否可以设置 contenteditable 元素的最大大小，以防止它输入比可编辑“窗口”宽度更多的字符。

我有这样的事情: <h2 contenteditable="true">My text</h2>

h2元素有自己的大小和样式:

h2 {
display: inline-block;
overflow: hidden;
width: 300px;
max-width: 300px;
height: 15px;
max-height: 15px;
}

现在，当我达到最大大小时，我可以输入更多字符，看起来我跳到了下一行。当我点击输入按钮时，我也会跳到下一行/原始。

我想要达到的是当我达到最大宽度时阻止此可编辑内容“窗口”，并阻止通过点击输入按钮来增加高度的可能性。

我想知道是否可以使用 html5/css 来做到这一点，或者唯一的机会是创建一些 javascript 代码？

预先感谢您的帮助!

Answer 1

您使用以下语句

<h2 contenteditable="true">My text</h2>

但是您没有应用 h2 的设置。因此，请将 h4 替换为 h2。

h2 {
display: inline-block;
overflow: hidden;
width: 300px;
max-width: 300px;
height: 15px;
max-height: 15px;
}