我有一个<p>为空的元素，在执行期间用文本填充元素时，如何给它高度而不将元素向下推？

Question

When the user does things with the app, I want to have an annoying <p> element telling what they just did. So I devised a simple code to show my problem. Every time I put text into my initially empty <p> tag, it pushes everything else on the screen down when it finally has text and height. Is there a way to force the <p> tag to have height and take up its space without the text in it? I have tried putting it in a div and doing a clear fix on it even with no floats. I have tried ::before and ::after with content: "" . All of my other attempts have failed as well. I know that I could put some text in it, either a single space or text with the same color as the background to force it to work, but I was trying to find a more elegant solution. Is there one?

 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

Add a linebreak to your empty <p> tag with <br>

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

Also while unflashing, set the innerHTML (replace .textContent with innerHTML ) of this <p> tag to <br>

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

---

Full code:

 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>