如何以字符数固定 textarea 的宽度？ （cols 属性不起作用）

Question

我想根据它们应该能够在每一行中容纳的 等宽 个字符的最大数量来指定文本区域的宽度既没有多余的剩余空间也没有溢出 .

有一些类似的问题，但一致的答案，即使用cols 属性，显然不起作用，如this jsFiddle 所示。它的 HTML 是这样的：

<textarea cols="1"  rows="2">1</textarea><br/>
<textarea cols="10" rows="2">1234567890</textarea><br/>
<textarea cols="20" rows="2">12345678901234567890</textarea><br/>
<textarea cols="40" rows="2">1234567890123456789012345678901234567890</textarea><br/>
<textarea cols="80" rows="2">12345678901234567890123456789012345678901234567890123456789012345678901234567890</textarea><br/>

实际宽度总是大大大于必要宽度。 （在 Safari 中，无论cols 的指定值如何，至少超出部分似乎保持不变；但是对于 Chrome，超出部分会随着 cols 值的增长而增长。）

我还尝试将 CSS width 属性与 em 和 ex 单位一起使用。后者导致字段比所需的字符窄几个字符，而前者导致比cols 属性产生的宽度更大。

最后，我研究了将宽度设置为 ex 单位，作为通过将字符数乘以一些软糖因子获得的数字。这不仅令人作呕（我们不应该做浏览器的工作），而且也不是跨浏览器：我发现 Chrome 和 Safari（例如）的软糖因素有很大不同（1.333 与 1.415）。

有没有专业的¹方法可以做到这一点？

---

^{1即跨浏览器、无需猜测、无需破解、记录在案、经过深思熟虑等。}

Answer 1

col 属性给出了准确的结果，但宽度比字符所需的稍大，因为右侧（或左侧，取决于方向性）有垂直滚动条的空间。您可以通过在该区域中再输入几行来看到这一点。

您可以使用overflow: hidden 移除可滚动性来移除滚动条的空间。

在ch units 中设置宽度的替代方法，但浏览器支持更有限。

textarea {
    resize:none;
    background-color:lightgray;
    padding:0;
    font-family: monospace;
}
.fix {
    overflow: hidden;
}
.w18 {
    width: 18ch;
}

<textarea cols="18" rows="2">123456789012345678</textarea>
<p>See what happens when vertical scrolling is needed:<br>
<textarea cols="18" rows="2">123456789012345678
123
123</textarea>
<p>Fixed by removing space for scroll bar:<br>
<textarea cols="18" rows="2" class="fix">123456789012345678</textarea>
<p>Fixed by setting width in `ch` units:<br>
<textarea cols="18" rows="2" class="w18">123456789012345678</textarea>

如演示所示，overflow: hidden 还删除了水平滚动条的空间。浏览器通常会留下这样的空间，因此该区域似乎比rows 的值多一排，即使浏览器通常不会像以前那样显示水平滚动条（它们在视觉上会换行）。改用overflow-y: hidden 保留该空间

您需要考虑移除滚动条对可用性的影响。如果目的是向用户显示允许的最大行长，也许您可​​以通过强制滚动条而不是删除它来做到这一点。

<textarea cols="18" rows="2" style="overflow-y: scroll; overflow-x: hidden; resize: none">123456789012345678</textarea>

Answer 2

这是否称得上专业尚有争议，但您可以设置textarea 的样式以使用固定宽度的字体

textarea {
    font-family: Courier;
}

然后以em 或ex 为单位设置其宽度。但是，要使用的确切宽度将取决于特定字体，并且可能会受到浏览器字体渲染的细微差异的影响。这是codepen 上的示例。

使用这种方法，“软糖因子”不会像差异那么大（在所有浏览器上几乎相同），但您只能使用您确信可以在客户端上使用的字体。在大多数情况下，Courier 可能是最接近安全的方式。

这是 Chrome 中的结果：

火狐：

和 Safari：

如您所见，浏览器计算默认字体大小的方式存在明显差异，但在所有情况下，它们都正确地将文本区域的宽度设置为指定的字符数。