Question

我想根据等宽字符的最大数量来指定textareas的宽度，它们应该能够在每行中保留，并且没有多余的剩余空间也不会溢出

有一些类似的SO问题，但是使用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的指定值如何;但是，随着cols的值增长，过量增长。）

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

最后，我调查了以单位为单位的宽度，将字符数乘以某个软糖因子得到的数字。这不仅令人作呕（我们不应该做浏览器的工作），而且也不是跨浏览器：我发现Chrome和Safari（例如）的软糖因素差异很大（1.333 vs 1.415）。

是否有专业的¹方式来做到这一点？

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

Answer 1

col属性可提供准确的结果，但宽度略大于字符所需的宽度，因为右侧（或左侧，取决于方向性）有垂直滚动条的空间。你可以通过在该区域输入更多行来看到这一点。

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

您需要考虑滚动条在可用性方面的含义。如果目的是向用户显示允许的最大行长度，也许您可以通过强制滚动条而不是删除它来实现。

＆＃13;

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

＆＃13;

Answer 2

这是否有资格作为专业人士是有争议的，但您可以设置textarea的样式以使用固定宽度的字体

textarea {
    font-family: Courier;
}

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

通过这种方法，＆＃34;软糖因子＆＃34;不会有差异（它在所有浏览器上几乎都一样），但是你只限于你确信可以在客户端上使用的字体。在大多数情况下，信使可能是最安全的。

以下是Chrome中的结果：

http://f.cl.ly/items/1m1e0f353x0v201S0V0B/chrome.png

火狐：

http://f.cl.ly/items/0K0Z0k3k0y3x1M250u3w/firefox.png

和Safari：

http://f.cl.ly/items/27152T0K3Y2g1m170j0O/safari.png

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

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

2 个答案:

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

2 个答案:

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