CSS自动换行不适用于<a> tag

Question

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

How tag:a looks like:

标签：a应该是：

我的代码如下：

push_back

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

Answer 1

正如Vitorino fernandes在评论中所述，在display:block中添加了.GreenBtn。 它按预期工作。

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

Answer 2

将div元素宽度从'width：50px;'更改到'宽度：自动;' 它会正常工作。

Answer 3

我编辑了你的代码，其中大部分是不必要的，我将文本居中，使得div span自动宽度并限制了按钮大小（当你试图控制的按钮大小时，为什么还要把div变小？ ？。），我还添加了＆＃34; word-break：break-word;＆＃34;如果视口小于单词长度，css样式将突破到新行，我也删除了你的内联样式（尽量避免在内联样式，这是不好的做法）。除了其他编辑，这些是主要的，看一看，如果你有任何问题，或者如果我遗漏了你需要的东西，请告诉我，我可以改变我的答案或回答评论：）！

＆＃13;

＆＃13;

//this div statement can be deleted because a div is set to "width: auto;" by default anyway.

div{
    width: auto;
}

.GreenBtn {
    background-color: #6aae12;
    border: 1px solid #539102 !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    display: block;
    word-break: break-word;
    width: 115px;
    text-align: center;
    text-decoration: none;
    padding: 20px;
    box-sizing: border-box;
}

＆＃13;

<div >
  <a class="GreenBtn" href="#">
    <span> Bestellung anzeigen </span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

- SD