1

На моей веб-странице у меня есть всплывающее изображение в серии вложенных 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 определенное значение, поскольку размер шрифта - это переменная на моей странице. Я попытался установить размер эмодзи на 75%, и это работает в Chrome и iOS, но нет гарантии, что это будет работать на каждой платформе.

Есть идеи, как я могу заставить это делать то, что я хочу?

Свободный перевод вопроса In HTML/CSS how can I make emoji the same size as the text? от участника @Mike McCollister.

1

1 ответ 1

1

Установите line-height для своего 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>

Свободный перевод ответа от участника @иTemani Afif.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.