CSS: настройка цвета фона на пролете вызывает предысторию неясного текста

Question

Самый простой способ объяснить мою проблему является примером:

<p style="line-height:1;"> 
<span style="background-color:yellow">ggggg<br>TTTT 
</span> 

или, если вы предпочитаете, https://jsfiddle.net/k17760zr/

вы можете видеть, что на первый план на «T» перекрывается нижняя часть «g», скрывающая текст. Однако, если вы удаляете подсветку, визуально нет помех между двумя линиями, и даже можно использовать мышь, чтобы выбрать T без затенения g, поэтому не кажется, что линии перекрываются.

Я понимаю, что могу обойти это, изменив высоту линии или установив цвет фона всего абзаца, но это не подходит в моих обстоятельствах. Есть ли способ сохранить высоту линии и по-прежнему выделять отдельные части в абзаце без выделения выделения, перекрывающего линию выше?

Answer 1

Используйте display: inline-block на <span>.

Demo

span { 
 
    display: inline-block; 
 
}

<p style="line-height:1;"> <span style="background-color:yellow">ggggg<br />TTTT 
 
    </span> 
 
</p>

Answer 2

Вы можете увеличить высоту строки р.

<p style="line-height:1.2;"> 
    <span style="background-color:yellow">ggggg<br />TTTT</span> 
</p>