如何防止 textarea 内容溢出到填充中？答案

【问题标题】：How to prevent textarea content from overflowing into padding?如何防止 textarea 内容溢出到填充中？
【发布时间】：2021-10-19 11:52:02
【问题描述】：

我已为 textarea 元素添加了填充。但是，在输入超过四行内容后，内容会溢出到填充中。有什么办法可以防止内容溢出到padding中？

body {
    background: grey;
}
textarea {
    width: 100%;
    margin: 0;
    padding-top: 1em;
    resize: none;
}

<body>
    <textarea name="" id="" cols="30" rows="4"></textarea>
</body>

【问题讨论】：

当我在测试这个时，越过第 4 行只是不断地把文本往下拉，让我滚动回到顶部。我没有看到任何溢出的东西。你这里有其他代码可能导致它吗？
感谢您的及时回复！我只使用了上面的代码来产生我的问题。我已经编辑了问题以包含问题的图片。我目前在 Safari 14.0.1 上运行，但这个问题似乎也出现在 Chrome 上。
对不起，我一定没有关注问题所在。我也在chrome上做过。我什至在这里添加了你的 sn-p。如果我只是输入 4 行不同的行，那么到第 5 行时，它只会将文本放下。但再次滚动回顶部后，您的填充仍然存在。
您可以滚动到顶部。它没有以任何方式溢出
我的问题可能措辞不正确。当内容到达第五行时，第一行移入填充。所有后续的新行将导致同时显示五行。如何只显示内容框内的四行，并防止第一行移入内边距？

标签： html css

【解决方案1】：

我找不到使用填充的方法，但可以通过设置文本区域的顶部边框而不是填充来实现相同的效果：

body {
    background: grey;
}
textarea {
    width: 100%;
    margin: 0;
    border-top-width: 1em;
    border-top-color: white;
    resize: none;
}

<body>
    <textarea name="" id="" cols="30" rows="4"></textarea>
</body>

【讨论】：