如何确定字符数中textarea的宽度? (cols属性不起作用) [英] How to fix the width of textarea in number of characters? (cols attribute does NOT work)

问题描述

我想以等宽字符的最大数目来指定textareas的宽度，这些字符应该能够在每行中保留，而没有多余的剩余空间也不溢出

有一些类似的问题，但是共识答案(即使用cols属性)绝对不起作用，如

实际宽度始终始终大于必要宽度. (在Safari中，无论指定的cols值如何，多余的值似乎都保持不变；但是对于Chrome，多余的值随着cols的值增长而增长.)

我还尝试将CS​​S width属性与 em 和 ex 单元.后者导致字段的宽度比所需宽度窄几个字符，而前者导致的宽度甚至大于cols属性产生的宽度.

最后，我研究了将宽度设置为ex单位，即通过将字符数乘以一些软糖系数而获得的数字.这不仅令人恶心(我们不应该做浏览器的工作)，而且也不是跨浏览器的:例如，我发现Chrome和Safari的错误因素大不相同(1.333与1.415).

是否有专业的 ¹ 方法来做到这一点?

---

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

I want to specify the width of textareas in terms of the maximum numbers of monospace characters they should be able to hold in each line with neither excess leftover space nor overflow.

There are a few SO similar questions, but the consensus answer, namely to use the cols attribute, decidedly does not work, as shown in this jsFiddle. The HTML for it is this:

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

The actual width is always substantially greater than the necessary width. (In Safari at least the excess seems to remain constant, irrespective of the specified value of cols; with Chrome, however, the excess grows as the value of cols grows.)

I also tried using the CSS width property with em and ex units. The latter results in fields that are several characters narrower than needed, while the former results in even greater widths than those resulting from the cols attribute.

Finally, I investigated setting the width, in ex units, as the number obtained by multiplying the number of characters by some fudge factor. This is not only disgusting (we shouldn't be doing the browser's work), but also is not cross-browser: the fudge factors I found for Chrome and Safari (for example) are substantially different (1.333 vs 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 attribute gives accurate results, but the width is somewhat larger than needed for the characters, since there is room for vertical scroll bar on the right (or left, depending on directionality). You can see this by entering a few more lines in the area.

You can remove the room for scroll bar by removing scrollability, using overflow: hidden.

An alternative to set the width in ch units, but browser support is more limited.

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>

As the demo shows, overflow: hidden also removes the space for a horizontal scroll bar. Browsers generally leave such a space, so that the area seems to have one row more than the value of rows, even though browsers normally do not show a horizontal scroll bar as they used to (they visually break lines instead). Using overflow-y: hidden instead keeps that space

You need to consider what the removal of scroll bars implies in terms of usability. If the intent is to show the user the maximum allowed line length, maybe you can do that by forcing a scroll bar instead of removing it.

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

这篇关于如何确定字符数中textarea的宽度? (cols属性不起作用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！