新行上的HTML内容具有重叠的背景效果

Question

下面是我的问题，这些是相同的链接，橙色背景是在css中设置的悬停效果。正如您所看到的那样，当窗口被压缩时，链接的文本会移动到下一行以适合屏幕。但每条线的背景效果掩盖了第二条线。我可以将显示设置为阻止，但这会将背景拉伸到窗口的100％，这在页面不窄时不是我想要的。

提前致谢

编辑：代码

<div class="PageSection">
    <a class="LinkButton" href="">This Is My Link, There Are Many Like It But This One Is Mine</a>
</div>

.PageSection {
    width: 100%;
    margin: 50px 0px 50px 0px;
    text-align: center;
    font-size: 30px;
}

input[type="button"],
input[type="submit"],
.LinkButton {
    padding: 5px 10px 5px 10px;

    cursor: pointer;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    line-height: 100%;

    border: none;
    background-color: transparent;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
    background-color: #FF5A19;
}

编辑： 我知道我可以设置行高css属性，但是这会给链接带来难看的间距，我也瞄准了背景颜色的方块，而不是页面的整个宽度。

Answer 1

我认为我已经设法做你想要的，你想要它甚至在全宽度上或当页面宽度较小时多行

我使用了多个spans标签来控制行

  <label class="toggle" for="chkShow1">Show first element</label>
  <input id="chkShow1" type="checkbox">
  <div>Lorem Ipsum ... however, this is the first content</div>

  <label class="toggle" for="chkShow2">Show second element</label>
  <input id="chkShow2" type="checkbox">
  <div>This is the second content ;)</div>

这是我所取得的成就

我已经更新了你想要的结果 See the FIDDLE here

Answer 2

假设您的填充用于创建额外的块效果。

试

.PageSection {
    width: 100%;
    margin: 50px 0px 50px 0px;
    text-align: center;
    font-size: 30px;
}

input[type="button"],
input[type="submit"],
.LinkButton {
    /*padding: 5px 0 5px 0;*/
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    line-height: 100%;
    border: none;
    background-color: transparent;
    background-clip: padding-box;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
    background-color: #FF5A19;
    box-shadow: 10px 0 0 0px #FF5A19,-10px 0 0 0px #FF5A19;
}

链接上您需要的只是background-clip: padding-box;链接和一些框阴影，以覆盖填充因内联元素行为而无法到达的额外位。

修改：JSFiddle