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