HTML content on new lines has overlapping background effect

Below is my problem, these are the same link and the orange background is a hover effect set in css. As you can see when the window is compressed the text of the link moves onto the next lines to fit the screen. But the background effect of each line obscures the second. I can set the display to be block, but that would stretch the background to 100% of the window, which isn't what I want when the page is not narrow.

Thanks in advance

EDIT: CODE

<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;
}