行の長さはブラウザがそろえるので、<br>は要りません。 日本語は1文字ごとに折り返せるため、言葉の途中で切りたくない部分は、以前と同じ<span>で囲みます。 balanceは、その切れ目の中で行の長さをそろえます。

h2 {
  text-wrap: balance;
}

.nowrap {
  white-space: nowrap;
}

<h2>
  <span class="nowrap">新しい機能で、</span><span class="nowrap">以前の書き方を</span><span class="nowrap">置き換える</span>
</h2>

最後の行が短くならないよう、見出しに<br>を入れ、狭い画面では消していました。 言葉の途中で切れないよう、文節をwhite-space: nowrapの<span>で囲むこともありました。 文言や画面幅が変わるたびに、改行の位置を決め直す必要があります。

.nowrap {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hidden-md {
    display: none;
  }
}

<h2>
  <span class="nowrap">新しい機能で、</span><br class="hidden-md" /><span class="nowrap">以前の書き方を</span><span class="nowrap">置き換える</span>
</h2>