在HTML/CSS中，如何使表情符号与文本大小相同？

在我的网页上，我在一系列嵌套的div中有一个弹出图像。在最高级别，我有一个头衔。在加载此图像的更高分辨率时，我显示一个表情沙漏(⏳) 在标题中。完成后，我移除沙漏。移除沙漏后，包含标题文本的div在垂直方向上变小。如何使表情符号与文本大小相等，从而不会使我的div变得更高

下面是一个代码片段，显示了一个带有青色背景颜色和表情符号的div。单击按钮时，innerHTML将替换为不带表情符号的文本，您可以看到垂直大小变小

document.getElementById（“按钮”）.onclick=
（）=>{document.getElementById（“div”）.innerHTML=“这是一些没有表情符号的文本”}；

div.textWithEmoji{
字号：中等；
背景色：青色；
}

表情大小测试
表情大小测试
这是一些带有表情符号的文本⏳


删除表情符号

尝试将图标放在保存表情符号的

元素中。例如：

<p>This is some text with emoji <span class="emoji">⏳</span> </p>

---

您可以将其包装在一个跨距中，给它一个类，并减小字体大小：

document.getElementById（“按钮”）.onclick=
（）=>{document.getElementById（“div”）.innerHTML=“这是一些没有表情符号的文本”}；

div.textWithEmoji{
字号：中等；
背景色：青色；
}
.图标{
字体大小：75%；
}

表情大小测试
表情大小测试
这是一些带有表情符号的文本⏳


删除表情符号

您可以将其放入

span

并给出

font size

document.getElementById（“按钮”）.onclick=
（）=>{document.getElementById（“div”）.innerHTML=“这是一些没有表情符号的文本”}；

div.textWithEmoji{
字号：中等；
背景色：青色；
}
span{font size:12px；}

表情大小测试
表情大小测试
这是一些带有表情符号的文本⏳


删除表情符号

设置div的行高：

$（“#按钮”）。单击（函数（）{
$（'.textWithEmoji'）.html（“这是一些没有表情符号的文本”）
})；

div.textWithEmoji{
字号：中等；
背景色：青色；
线高：1.2米；
保证金：5px0；
}

表情大小测试
这是一些带有表情符号的文本⏳
这是一些带有表情符号的文本⏳
这是一些带有表情符号的文本⏳
这是一些带有表情符号的文本⏳
删除表情符号

，因为你发现没有任何保证，它在任何地方都能正常工作。这也可能是某些浏览器中的一个已知错误，也许这些问题将来会得到解决，这在两种情况下都是你无法控制的。现在，你必须找到自己的解决方案。从现有答案中尝试span-with-a-class方法-在least您可以轻松地调整表情符号的大小。请注意，

的高度与Firefox桌面上的表情符号保持一致。这里的问题可能是表情符号缺乏标准表示，每个操作系统或浏览器都可以根据灵感任意显示任何表情符号。当我遇到这个问题时最近，我使用了

而不是表情符号。谢谢。将线条高度设置为1.2米似乎是最好的解决方案。我感谢您的帮助。

.emoji {
     font-size: 1vw; // vw, vh, em, rem, px or %
     // OR
     transform: scale(1.25);
 }