<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");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.