Html 同一元素中拆分文本的背景色

我试图在我工作的网站上产生这种效果：

HTML:

我需要文本始终保持接近（删除中间未着色的笔划），但如果我尝试使用线条高度进行更正，则在调整大小和/或其他浏览器上，文本会中断。

这里是我的解决方案：

CSS:

#大标题{
显示：内联块；
填充：1vh 1vw；
利润率：0.4vw；
颜色：#fff；
背景色：rgba（0,0,0,0.7）；
字体系列：Roboto；
字号：200；
文本转换：大写；
-webkit盒阴影：15px00RGBA（0,0,0.7），-15px00RGBA（0,0,0.7）；
盒影：15px00rgba（0,0,0.7），-15px00rgba（0,0,0.7）；
背景色：rgba（0,0,0,7）；
}

时尚大堂商务中心
伊克本哈文斯中心

我已经设置了

行高：55px

，在Safari和Chrome中调整大小时效果很好。这个解决方案的问题在于，我们在文本后面有一个很大的黑色区域

<h1 class="bigHeadline">Trendy lobby og business center i Københavns centrum</h1>

padding: 3px 0 0;
font-size: 44px;
line-height: 57px;
margin: 0 auto;
display: inline;
-webkit-box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
background-color: rgba(0,0,0,.7);
color: #fff;
font-family: Roboto;
font-weight: 200;
text-transform: uppercase;