我想根据最大数量指定文本区域的宽度等宽字体他们应该能够在每一行中容纳的字符既没有多余的剩余空间,也没有溢出.
有一些类似的问题,但一致的答案是使用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 professional1 way to do this?
1i.e. cross-browser, guesswork-free, hack-free, documented, well-thought-out, etc.