CSS 文本背景颜色被切断

Question

首先，这是指南以及我想要实现的目标:

它不需要看起来 100% 相似，但至少应在每个 EndOfLine 处留出一个空格。好吧，这就是我尝试这样做时发生的情况:

如您所见，第一行的结尾和第二行的开头都没有到边框的空格。另一方面，第一行的开头和第二行的结尾确实有一个空格。

这是我的 HTML 和 CSS 标记。

<div class="headline-h2">
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h2>
</div>


h2 {
background-color: #000000;
clear: left;
color: #FFFFFF;
display: inline;
float: left;
font-size: 14px;
font-weight: normal;
padding: 4px;
position: relative;
}

.headline-h2 {
float: left;
margin-bottom: 28px !important;
width: 100%;
}

我已经尝试了一些事情，但我无法终生解决这个问题。我还必须补充一点，文本是可变的，因此如果客户需要，它可能是完全不同的东西。还需要说明的是，我们明确需要它作为内联元素。我知道它适用于 block 。

Answer 1

为什么不直接将 padding 添加到您的 h2:

h2 {
    background-color: #000000;
    clear: left;
    color: #FFFFFF;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: normal;
    position: relative;
    padding-left: 5px;
    padding-right: 5px; 
}