如何实现“ DYMO标签”样式的段落文字问题

Question

这是我的代码笔，它说明了我要执行的操作：

https://codepen.io/adambeecham/pen/VJGyGa

<div class="column col-3">
    <span>Lorem ipsum dolor sit amet,</span><span>consectetur adipiscing elit, sed do</span><span>eiusmod tempor incididunt ut labore</span><span>et dolore magna aliqua. Ut enim</span><span>ad minim veniam, quis nostrud</span><span>exercitation ullamco laboris nisi</span><span>ut aliquip ex ea commodo consequat.</span><span>Duis aute irure dolor in reprehenderit</span><span>in voluptate</span>
</div>

-

.column {
    width: 400px;
    background: #eee;
    padding: 20px 0;
}
span {
    font-size: 22px;
    background: #000;
    color: #fff;
    padding: 0.4em 0;
}
.col-3 span {
    padding: 0.3em 0.8em;
    display: inline-block;
    margin: 0 0 0.3em;
}

我想实现Codepen的第3列–每一行文本的顶部，底部和两侧均应填充。如第1栏和第2栏所示，使文本“靠”背景色是不好的。

但是我的第3列中的解决方案不起作用，因为我不得不将每一行都包装在span元素中。我需要能够将其应用于任何文本，并使其能够响应地工作-我不能指定换行符在哪里。

希望这有道理，有什么想法吗？通过滥用下划线属性的解决方案？还是伪元素？我想不出一个可行的解决方案。谢谢！