Cuando el usuario hace cosas con la aplicación, quiero tener un elemento <p> molesto que diga lo que acaba de hacer. Así que ideé un código simple para mostrar mi problema. Cada vez que pongo texto en mi etiqueta <p> inicialmente vacía, empuja todo lo demás en la pantalla hacia abajo cuando finalmente tiene texto y altura. ¿Hay alguna manera de forzar que la etiqueta <p> tenga altura y ocupe su espacio sin el texto en ella? He intentado ponerlo en un div y hacer una solución clara incluso sin flotadores. He intentado ::before y ::after con content: "" . Todos mis otros intentos también han fallado. Sé que podría poner algo de texto en él, ya sea un solo espacio o texto con el mismo color que el fondo para que funcione, pero estaba tratando de encontrar una solución más elegante. ¿Hay uno?
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>Agregue un salto de línea a su etiqueta <p> vacía con <br>
<p id="popupText"><br></p> Además, mientras no parpadea, configure el HTML innerHTML (reemplace .textContent con innerHTML ) de esta etiqueta <p> en <br>
let unflashSomeText = function() { flashTextEl.innerHTML = "<br>" flashTextEl.style.background = "white"; flashTextEl.style.color = "black" };Código completo:
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>