span要素にある文章を折り返したいです

span要素にある文章を折り返して表示したいです。

spanはインラインなので通常は折り返して表示されるのですが、緑のマーカーをひく設定があるためinline-blockを設定しました。

inline-blockの設定を解除すると、今度は緑のマーカーが細くなってしまうため、解除できずにいます。

css
1background: linear-gradient(transparent 30%, #E3F7F8 30%);

上記の%の数字を変えてみたり、line-heightの数値を変えても変わらず。。。

詳しい方がいらっしゃれば教えていただけるととても助かります。

html
1<div class="support__img-inner">
2<div class="support__img-inner-text">
3<p class="support__img-inner-text1">お客様の状況に合わせて依頼内容を選択できます！</p>
4<p class="support__img-inner-text2 support__p2">・<span>書類収集、作成、登記申請</span>など、必要な作業全部まとめて依頼で楽々手続き。<br>・必要な作業に絞って依頼して、<span>手数料を節約。</span>
5</p>
6</div>
7</div>
8

css
1.support__img-inner-text {
2  width: 450px;
3}
4
5.support__img-inner-text span {
6  display: inline-block;
7  background: linear-gradient(transparent 30%, #E3F7F8 30%);
8  line-height: 1.8;
9  color: #333333;
10}
11
12.support__img-inner-text1 {
13  width: 417px;
14  height: 77px;
15  font-size: 26px;
16  letter-spacing: 0.1em;
17}
18
19.support__img-inner-text2 {
20  font-size: 20px;
21  letter-spacing: 0.1em;
22}
23
24.support__p2 {
25  width: 417px;
26  height: 197px;
27  padding-top: 40px;
28}