我有A＆lt; p＆gt;空的元素，当我在执行过程中填充文本时，如何给它高度而不将元素推下元素？

Question

当用户使用该应用程序做事时，我想拥有一个烦人的＆lt; p＆gt;元素告诉他们他们刚刚做了什么。因此，我设计了一个简单的代码来显示我的问题。每当我将文本放入最初的空＆lt; p＆gt;标签中时，当它最终具有文本和高度时，它都会按屏幕上的其他所有内容。有没有办法强制＆lt; p＆gt;标签具有高度并在没有文本的情况下占用其空间？我已经尝试将其放入div中，即使没有浮子，也要对其进行清晰的修复。我已经尝试了::和:: after content：“” 。我所有的其他尝试也失败了。我知道我可以在其中写一些文本，要么是一个空间，要么具有与背景相同的颜色以迫使其工作的颜色，但我试图找到一个更优雅的解决方案。有一个吗？

const actionButton = document.getElementById("actionButton");

let flashSomeText = function() {
  const flashTextEl = document.getElementById("popupText");

  flashTextEl.textContent = "You Just Got Paid";
  flashTextEl.style.background = "rgb(18, 163, 49)";
  flashTextEl.style.color = "white";

  let unflashSomeText = function() {
    flashTextEl.textContent = ""
    flashTextEl.style.background = "white";
    flashTextEl.style.color = "black"
  };
  setTimeout(unflashSomeText, 1500);

};
actionButton.addEventListener("click", flashSomeText);

@charset "utf-8";
body {
  background: rgb(211, 211, 211);
  max-width: 1680px;
  height: 100vh;
}

#wrapper {
  background: white;
  width: 90%;
  margin: 0 auto;
  min-height: 100%;
}

header>h1 {
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 0;
  text-align: center;
}

#popupText {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

#actionButtonDiv {
  margin-top: 10px;
  text-align: center;
}

#footerText {
  text-align: center;
}

<div id="wrapper">
  <header>
    <h1>Some Header Text</h1>
  </header>
  <p id="popupText"></p>
  <div id="actionButtonDiv">
    <button type="button" id="actionButton">Flash Text</button>
  </div>
  <footer id="footerText">
    <p>Some Footer Text</p>
  </footer>
</div>

Answer 1

在解开＆lt; br＆gt;标签上，在您的空＆lt; p＆gt;上添加线折

<p id="popupText"><br></p>

，同时也解开时，设置innerhtml（替换）。此＆lt; p＆gt;标记为textcontent带有inninhtml） ＆lt; br＆gt;

let unflashSomeText = function() {
  flashTextEl.innerHTML = "<br>"
  flashTextEl.style.background = "white";
  flashTextEl.style.color = "black"
};

---

完整代码：

const actionButton = document.getElementById("actionButton");

let flashSomeText = function() {
  const flashTextEl = document.getElementById("popupText");

  flashTextEl.textContent = "You Just Got Paid";
  flashTextEl.style.background = "rgb(18, 163, 49)";
  flashTextEl.style.color = "white";

  let unflashSomeText = function() {
    // resetting the text content to a linebreak again
    flashTextEl.innerHTML = "<br>"
    flashTextEl.style.background = "white";
    flashTextEl.style.color = "black"
  };
  setTimeout(unflashSomeText, 1500);

};
actionButton.addEventListener("click", flashSomeText);

@charset "utf-8";
body {
  background: rgb(211, 211, 211);
  max-width: 1680px;
  height: 100vh;
}

#wrapper {
  background: white;
  width: 90%;
  margin: 0 auto;
  min-height: 100%;
}

header>h1 {
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 0;
  text-align: center;
}

#popupText {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

#actionButtonDiv {
  margin-top: 10px;
  text-align: center;
}

#footerText {
  text-align: center;
}

<div id="wrapper">
  <header>
    <h1>Some Header Text</h1>
  </header>
  <!-- replacing empty text with a linebreak -->
  <p id="popupText"><br></p>
  <div id="actionButtonDiv">
    <button type="button" id="actionButton">Flash Text</button>
  </div>
  <footer id="footerText">
    <p>Some Footer Text</p>
  </footer>
</div>