html - CSS 自动换行不适用于 <a> 标签

Question

我正在为标签:a 使用 Word-wrap:brakword。如果它溢出 width:100px;

tag:a 的样子:

tag:a 应该如何:

我的代码如下所示:

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

作为Vitorino fernandes在评论中告知，在 .GreenBtn 中添加了 display:block。 它按预期工作。

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