Textarea cols 对于表情符号不正确答案

【问题标题】：Textarea cols not correct for emojiTextarea cols 对于表情符号不正确
【发布时间】：2019-05-24 17:24:44
【问题描述】：

我有一个包含 10 列的文本区域，但显然这不足以显示 10 个表情符号。

如何计算显示 10 个表情符号所需的确切列数？

&lt;textarea cols="10" rows="4"&gt;????????????????????????????????????????&lt;/textarea&gt;

【问题讨论】：

您不应该依赖cols 和rows attrs，因为它们会在不同的浏览器上产生不同的视图。
你会推荐什么来计算 10 个表情符号所需的宽度（以像素为单位），比如字体大小为 10px？每个表情符号不是 10 像素。
cols 属性的行为不像精确的字符宽度，它用于告诉浏览器在一行中应该有多少个 average-width 字符。从这里查看更多信息 developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea 和 html.com/attributes/textarea-cols
有没有办法知道特定字体大小的平均宽度是多少，比如font-size:10px？
我意识到我发布了解释问题发生的原因，但没有提出解决方案。 @Kokodoko 请查看编辑并牢记有关cols 提到的不一致的注意事项，因为它确实适用。

标签： html forms

【解决方案1】：

这是因为对于 emojis，计算的字体会回退到 font-family 上的下一个字体，因为第一个字体不处理 emojis。见this answer。

请参阅下面为 Chrome 和 Firefox 的此代码 [ubuntu 18.04] 呈现的结果，以及每种情况下使用的字体：

<textarea cols="10" rows="6">0123456789
??????????
??????????</textarea>

解决方案：为您的页面添加支持表情符号的字体并将其放在font-family 的开头或为您要使用的每个浏览器添加表情符号默认字体：

<textarea rows="6" style="width:10ch;overflow:hidden;resize:none;font-family:Twemoji Mozilla,Noto Color Emoji">
0123456789
??????????
??????????</textarea>

【讨论】：