使用CSS将文本限制为输入框的大小

Question

当前的行为是，当我在文本区域中添加文本直到最后时，我仍然能够在底部添加文本，其中第一行移到顶部。我想将字符数限制为文本框的宽度和高度。我还找不到办法。 resize：none和overflow：hidden仅禁用调整大小和隐藏滚动条。请提供解决方案。

我当前的html：

<textarea rows="10" cols="50" name="status" class="input" autofocus></textarea>

CSS：

.input{
    outline: 0;
    font-weight: 1000;
    text-align: center;
    resize: none;
    overflow: hidden;
    padding: 20px;

}

JSFiddle：https://jsfiddle.net/hsodfkzu/11/

演示：

这是该文本区域可以容纳的正确字符数

但是，它仍然可以接受更多字符，因此textarea看起来不像下面这样：

我不想在第十行之外添加更多文本。不确定是否有限制的方法。

Answer 1

一个<input>元素，最大长度为10个字符：

<input maxlength="number">

<textarea rows="10" cols="50" name="status" class="input" maxlength="10" autofocus></textarea>