box-decoration-breakプロパティでテキストに背景色を設定します。複数行の文字に対応でき、改行も問題ありません。
デモページはこちら

以下のhtml構造で確認します。

<p>box-decoration-break: slice（初期値）</p>
<div class="div-parent">
  <span class="span-child style01">ダミーテキストダミーテキストダミーテキスト</span>
</div>

<p>box-decoration-break: clone</p>
<div class="div-parent">
  <span class="span-child style02">ダミーテキストダミーテキストダミーテキスト</span>
</div>

CSSはbox-decoration-breakプロパティを初期値のsliceからcloneに変更するだけです。ベンダープレフィックスの「-webkit-」が必要です。

.span-child {
  font-size: 2.5rem;
  line-height: 2;
  color: #fff;
  padding: 3px 15px;
  background: #f36c49;
}

.style01 {
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

.style02 {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

box-decoration-breakプロパティをcloneにすると、複数行の場合は行ごとにマージンやパディングが有効になります。