如何用字符数来修复textarea的宽度？(cols属性不起作用)

Question

我想根据每行中应该能够容纳的等宽字符的最大数量来指定textareas的宽度,既没有多余的剩余空间也没有溢出.

有几个SO类似的问题,但共识的答案,即使用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增长而增长.)

我也尝试使用CSS width属性em和ex单位.后者产生的字段比需要的字符窄几个字符,而前者导致的宽度比cols属性产生的宽度更大.

最后,我研究了以ex为单位设置宽度,作为通过将字符数乘以某个软糖因子得到的数字.这不仅令人作呕(我们不应该做浏览器的工作),而且也不是跨浏览器:我发现Chrome和Safari(例如)的软糖因素大不相同(1.333对比1.415).

有没有专业^1点的方式来做到这一点？

---

^{1即跨浏览器,无猜测,无黑客,有文件记录,经过深思熟虑等.}

Answer 1

该col属性提供了准确的结果,但宽度略大于字符所需的宽度,因为右侧(或左侧,取决于方向性)有垂直滚动条的空间.您可以通过在该区域中输入更多行来查看此信息.

您可以通过删除可滚动性来删除滚动条的空间overflow: hidden.

另一种方法是以ch单位设置宽度,但浏览器支持更受限制.

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>