主页 / coding / 问题 / 78692845
Accepted
Basj
Asked: 2024-07-01 22:41:27 +0800 CST

使用水平滚动条时文本区域右填充？

  • 772

创建带有水平滚动条的滚动条时textarea，如何在右侧启用填充？CSSpadding适用于右上角，但不适用于右侧：

在此处输入图片描述

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
  border: 1px solid black;
  height: 5rem;
  width: 14rem;
  padding: 0.75rem;
}
<textarea>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</textarea>

html

2 个回答

  1. 有趣的问题。我会使用内容可编辑的 div。

    #test {
        white-space: pre;
        overflow-wrap: normal;
        overflow-x: scroll;
        border: 1px solid black;
        height: 5rem;
        width: 14rem;
        padding: 0.75rem;
    }
    <div id="test" contenteditable="plaintext-only">foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</div>

    • 1
  2. Best Answer

    这似乎是针对 textarea 的已知错误（问题 #40572939），在 Chromium 中一直存在而没有任何修复。正如问题中所述：

    这是因为布局溢出计算不包括块级子元素的行内末端填充，如果我们在这里改变我们的行为，这个问题可能会被修复。

    目前，我所知道的唯一解决方案是将其更改textarea为contenteditable类似于@spyder1329发布的内容。

    • 1

相关问题