<main>
<h1 id="postTitle">
<span class="preservePadding">Breaks over 2 lines, maintain padding</span>
</h1>
<button id="toggleBtn">Toggle box-decoration-break</button>
</main>
main {
width: 600px;
margin: 0 auto;
display: grid;
justify-items: center;
}
#postTitle span {
font-size: 50px;
font-weight: bold;
padding: 0px 30px;
background-color: rgb(254, 207, 12);
line-height: 90px;
}
.preservePadding {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
button {
width: 300px;
}
button:hover {
cursor: pointer;
}
@media screen and (max-width: 500px) {
main {
width: 100%;
}
#postTitle span {
font-size: 30px;
line-height: 50px;
}
}
btn = document.getElementById("toggleBtn");
btn.addEventListener("click", () => {
document
.getElementById("postTitle")
.firstElementChild.classList.toggle("preservePadding");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.