时间戳

首页 > 解决方案 > Textarea cols 对于表情符号不正确

html - Textarea cols 对于表情符号不正确

问题描述

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

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

<textarea cols="10" rows="4"></textarea>

标签： htmlforms

解决方案

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

请参阅下面为 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>

推荐阅读