如何固定文本区域的字符数宽度？ （cols 属性不起作用）

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

有一些类似的问题，但一致的答案是使用cols属性，显然不起作用，如图所示这个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 grows.)

我也尝试过使用 CSSwidth财产与em and ex单位。后者导致的字段比所需的窄几个字符，而前者导致的宽度甚至比由cols属性。

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

Is there a professional¹ way to do this?

^{1i.e. cross-browser, guesswork-free, hack-free, documented, well-thought-out, etc.}

The 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相反，保留该空间

您需要考虑删除滚动条对可用性意味着什么。如果目的是向用户显示允许的最大行长度，也许您可​​以通过以下方式做到这一点forcing滚动条而不是删除它。

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