在 HTML/CSS 中，如何使表情符號與文本大小相同？
[英]In HTML/CSS how can I make emoji the same size as the text?
問題描述
在我的 web 頁面上，我在一系列嵌套的 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 上使用，但不能保證在每個平台上都可以使用。
有什么想法可以讓我做我想做的事嗎？
謝謝，
麥克風
4 個解決方案
解決方案1
3 已采納 2021-06-02 14:30:58
為您的 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>
解決方案2
1 2021-06-02 14:22:12
嘗試將圖標放在包含表情符號的<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);
}
解決方案3
1 2021-06-02 14:22:13
您可以將它包裝在一個跨度中，給它一個 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>
解決方案4
1 2021-06-02 14:22:18
你可以把它放在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>
解決方案5
0 2022-02-03 16:15:10
回答下面給出的問題
如何使具有不同大小文本的列中的所有鏈接與 HTML 和 CSS 中的行大小相同？
[英]How to make all links in a column with different sizes of text the same size as the row in HTML and CSS?
css即使添加元素，如何使頁面正文保持相同大小？
[英]css How can I make the page body stay the same size even if I add element to it?
如何在span元素內垂直對齊文本，或使span與文本大小相同？
[英]How can I vertically align text within a span element, or make the span the same size as the text?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.