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

Question

我正在为 tag: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

将 div 元素宽度从 'width: 50px;' 更改为 'width: auto;' 它会很好地工作。

Answer 2

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

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

Answer 3

我编辑了你的代码，其中大部分是不必要的，我将文本居中，使 div 跨度自动宽度并限制按钮大小（为什么要费心使 div 变小这是您要控制的按钮大小？。），我还添加了 "word-break:break-word;" css 样式，如果视口小于单词长度，它将换行，我还删除了您的内联样式（尽量避免内联样式，这是不好的做法）。在其他编辑中，这些是主要的，看看，如果您有任何问题，或者如果我遗漏了您需要的内容，请告诉我，我可以更改我的答案或在评论中回答 :)!

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

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

-- 标准差

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

CSS Word wrap is not working on <a> tag

html

css

word-wrap