如何將表情符號放在 HTML/JavaScript 中的文本上？

Question

我有一行數字作為圖標<i>1</i><i>2</i><i>3</i><i>4</i>我正在嘗試制作一個 prigramm會動態地將特定的表情符號放在每個表情符號上。 這樣數字就在它的表情符號后面。

到目前為止，我只能設法按需划掉數字。 我在想，也許有可能在 CSS 中使用表情符號作為一種划線風格？

UPD：所以我在 HTML 和#six::before {content: ''; position: absolute;}中有<i id="six">6</i> #six::before {content: ''; position: absolute;}在 CSS 中，它正在工作，雖然它顯示為 askew ，並且z-index屬性沒有改變任何東西。

Answer 1

顯示表情符號的最簡單方法是簡單地復制和粘貼。 您只需要一個應用程序或 web 網站，允許您以其原生字符形式復制表情符號。 這樣做的一個好地方是 Emojipedia。 您可以使用 Emojipedia 來搜索或瀏覽您要查找的任何表情符號。 找到表情符號后，您可以在其中輕松查看和復制表情符號。

Answer 2

有很多因素會影響為什么內容會以相對於容器的偏移量呈現。 解決這個問題的最簡單方法是在 left 屬性上使用偏移量，以便它正確對齊。

我試圖制作一個演示來推斷您的初始條件。

當給定的 class 應用於元素時，我使用::before偽元素來呈現表情符號內容。 無論如何，為了確保父<i>元素與偽元素對齊，我用固定的高度和寬度設置了樣式，並在根元素中設置了字體大小，以便在使用 rem 時一切都得到正確的樣式。

所以這是 the.box 元素的樣式：

.box{
  position: relative;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  display: inline-block;
  text-align: center;
}

position:relative ，這樣偽元素將相對於其父元素絕對定位； 大小是固定的， display: inline-block將確保父元素在布局方面仍然是內聯的，但也會考慮其寬度。

該演示有 3 個按鈕：

• 一個切換表情符號的可見性
• 一個用於切換<i>元素（紅色）和 ::before 元素（藍色）的框輪廓
• 一個用於切換更好地對齊表情符號內容所需的偏移量

我使用了top: 20%並且我不得不承認它是任意的。 無論如何，我很確定它應該可以很好地適應字體大小。

請注意，由於<i>元素將格式設置為斜體，我在偽元素（ font-style: normal; ）中更改了它，這樣表情符號就不會被拉伸（就像您在示例中顯示的火焰一樣）。

 function toggleClassToBoxes(classname){ document.querySelectorAll('.container >.box').forEach(box => { box.classList.toggle(classname); }); } function toggleClassToBoxesByNumber(classnamePrefix){ document.querySelectorAll('.container >.box').forEach(box => { const i = parseInt(box.textContent); const classname = `${classnamePrefix}-${i}`; box.classList.toggle(classname); }); }

 :root{ font-size: 80px; }.box{ position: relative; width: 1rem; height: 1rem; line-height: 1rem; display: inline-block; text-align: center; }.box.outline{ outline: solid red 6px; }.emoji::before { position: absolute; font-style: normal; left: 0; right: 0; }.emoji.outline::before { outline: solid blue 3px; }.emoji.offset::before { left: -20%; /* This was overstating for the sake of evaluating any option padding: 0; margin: 0; width: 1rem; height: 1rem; line-height: 1rem; padding: 0; margin: 0; box-sizing: border-box; */ }.emoji-1::before{ content: ""; }.emoji-2::before{ content: ""; }.emoji-3::before{ content: ""; }.emoji-4::before{ content: ""; } button{ cursor: pointer; padding: .5em 1em; }

 <div class="container"> <i class="box">1</i> <i class="box">2</i> <i class="box">3</i> <i class="box">4</i> </div> <button onclick="toggleClassToBoxes('emoji');toggleClassToBoxesByNumber('emoji');" >Toggle Emojis</button> <button onclick="toggleClassToBoxes('outline');">Toggle Outlines</button> <button onclick="toggleClassToBoxes('offset');">Toggle Offset</button>