我有一个文本区域，其中定义了22列(列/字符(和16行。但分配给文本区域的列在桌面和设备上因浏览器而异。
以下是我在测试一个示例程序时获得的一些测试结果(https://codesandbox.io/s/condescending-snowflake-3ck5s)。
平台：Windows
谷歌chrome、新边缘浏览器和Firefox似乎每行只允许22个字符。
平台：Mac
Safari和Google chrome始终允许每行输入23个字符。
平台：Android
三星J7上的谷歌chrome每行只能输入22个字符。但三星S9上的谷歌chrome允许每行输入21个字符。
但是以下html的输出与上面的示例程序不同。谷歌chrome和新边缘浏览器总是每行只允许21个字符，而Firefox则支持22个字符。
<!DOCTYPE html>
<html>
<head>
<title>Textarea Tests</title>
<style>
textarea {
resize: none;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
Textarea 1:
<textarea cols="22" rows="5">
</textarea>
</body>
</html>所以我的结论是，不能保证我们得到我们在文本区域定义的确切列。在不同的浏览器和设备上，它总是类似于cols=n-1或n+1。
是否有基于javascript的解决方案来限制一行中的列数？
cols属性没有声明为精确的字符限制。但它表示为指定值的平均值。
所以，浏览器之间的差异是显而易见的。
请参阅文档：
cols：文本控件的可见宽度，以平均字符宽度表示。
您可以使用wrap来控制它：
wrap="hard"
查看包装的工作原理：
wrap：hard：浏览器自动插入换行符(CR+LF(，使每行的宽度不超过控件的宽度
如果未指定此属性，则soft是其默认值。
所以，你的html应该是：
<textarea cols="22" rows="5" wrap="hard">
</textarea>
为所有设备使用固定的默认高度和宽度
textarea {
width:264px;
height:80px;
resize: none;
overflow-y: scroll;
overflow-x: hidden;
}