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

Question

在我的网页上，我在一系列嵌套 div 中有一个弹出图像。在顶部 div 我有一个标题。在加载此图像的高分辨率时，我会在标题中显示表情符号沙漏 (⏳)。完成后，我取出沙漏。删除沙漏后，带有标题文本的 div 会垂直变小一点。我怎样才能使表情符号与文本大小相等，这样才不会让我的 div 变高？

这是一个代码片段，其中显示了一个 div 具有青色背景和表情符号。单击按钮时，innerHTML 将替换为没有表情符号的文本，您可以看到垂直尺寸变小了。

document.getElementById("button").onclick =
   () => {document.getElementById("div").innerHTML = "This is some text without emoji"};

div.textWithEmoji {
    font-size : medium;
    background-color : cyan;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji Size Test</title>
</head>

<body>

<h1>Emoji Size Test</h1>

<div class="textWithEmoji" id="div">
    This is some text with emoji ⏳
</div>

<br>

<button id="button" type="button">Remove Emoji</button>

</body>

</html>

我不想将 div 高度强制设置为特定值，因为 font-size 是我页面中的一个变量。

我试过将表情符号的大小设置为 75%，这适用于 Chrome 和 iOS，但不能保证这适用于所有平台。

我有什么想法可以让它做我想做的事吗？

谢谢，

迈克

Answer 1

尝试将图标放在包含表情符号的 <span> 元素中。喜欢：

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

然后尝试给 <span> 元素一些 CSS 使其具有与文本相同的大小。当然，这个解决方案是硬编码的。类似于：

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

Answer 2

你可以将它包裹在一个 span 中，给它一个 class，并减小字体大小：

document.getElementById("button").onclick =
   () => {document.getElementById("div").innerHTML = "This is some text without emoji"};

div.textWithEmoji {
    font-size : medium;
    background-color : cyan;
}

.icon {
    font-size: 75%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji Size Test</title>
</head>

<body>

<h1>Emoji Size Test</h1>

<div class="textWithEmoji" id="div">
    This is some text with emoji <span class="icon">⏳</span>
</div>

<br>

<button id="button" type="button">Remove Emoji</button>

</body>

</html>

Answer 3

你可以放在span里面给font-size

document.getElementById("button").onclick =
   () => {document.getElementById("div").innerHTML = "This is some text without emoji"};

div.textWithEmoji {
    font-size : medium;
    background-color : cyan;
}
span { font-size: 12px;}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji Size Test</title>
</head>

<body>

<h1>Emoji Size Test</h1>

<div class="textWithEmoji" id="div">
    This is some text with emoji <span>⏳</span>
</div>

<br>

<button id="button" type="button">Remove Emoji</button>

</body>

</html>

Answer 4

为您的div设置行高：

$("#button").click(function() {
  $('.textWithEmoji').html("This is some text without emoji")
});

div.textWithEmoji {
  font-size: medium;
  background-color: cyan;
  line-height: 1.2em;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Emoji Size Test</h1>

<div class="textWithEmoji" style="font-size:10px;">
  This is some text with emoji ⏳
</div>

<div class="textWithEmoji">
  This is some text with emoji ⏳
</div>

<div class="textWithEmoji" style="font-size:20px;">
  This is some text with emoji ⏳
</div>

<div class="textWithEmoji" style="font-size:30px;">
  This is some text with emoji ⏳
</div>



<button id="button" type="button">Remove Emoji</button>

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

In HTML/CSS how can I make emoji the same size as the text?

html

css

emoji