CSS Word wrap is not working on <a> tag

Question

I am using Word-wrap:brakword for tag:a. If it overflows the width:100px;

How tag:a looks like:

How tag:a Should be:

My Code looks like:

div{
    width: 50px;
}
.GreenBtn {
    background-color: #6aae12;
    border: 1px solid #539102 !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}
.buttonGreen {
    font-family: 'Roboto';
    border: 1px #ddd solid;
    background: #6AAE12;
    color: #FFF;
    /* margin-bottom: 10px; */
    padding: 7px 12px;
    transition: color 300ms ease-in-out 0s, background-color 300ms ease-in-out 0s, background-position 300ms ease-in-out 0s;
}

<div >
  <a class="GreenBtn buttonGreen" style="text-decoration: none;" href="#">
    <span> Bestellung anzeigen </span>
  </a>
</div>

Answer 1

As Vitorino fernandes told in comment, added display:block in .GreenBtn. It works as expected.

.GreenBtn {
        background-color: #6aae12;
        border: 1px solid #539102 !important;
        display:block
        color: #FFFFFF !important;
        cursor: pointer !important;
    }