如何防止 textarea 内容溢出到填充中？
Posted
技术标签:
【中文标题】如何防止 textarea 内容溢出到填充中？【英文标题】：How to prevent textarea content from overflowing into padding? 【发布时间】：2021-10-19 11:52:02 【问题描述】：我已为 textarea 元素添加了填充。但是，在输入超过四行内容后，内容会溢出到填充中。有什么办法可以防止内容溢出到padding中？
我引用了prevent expand to textarea 和How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)，但似乎这两种解决方案都无法解决我的问题。
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 行时，它只会将文本放下。但再次滚动回顶部后，您的填充仍然存在。 您可以滚动到顶部。它没有以任何方式溢出 我的问题可能措辞不正确。当内容到达第五行时，第一行移入填充。所有后续的新行将导致同时显示五行。如何只显示内容框内的四行，并防止第一行移入内边距？ 【参考方案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>【讨论】：
非常感谢。你知道为什么 textarea 会产生问题中的结果吗？ 我不怕。在某种程度上，它就像渗入填充的背景，但它完全不同于带有文本的“普通”div。以上是关于如何防止 textarea 内容溢出到填充中？的主要内容，如果未能解决你的问题，请参考以下文章