防止链接的Word Breaks - CSS

Question

我需要一些链接，以防止在需要wrap时被分解。我宁愿将整个链接移动到另一条线而不是链接的一半。

Here is an example

如果需要word-break，有没有办法让课程只打破'满'？ （意思是如果该类的内容超过了这些行，而不是破坏它，只需用它创建一个新行。）

我希望这是有道理的;谢谢你的时间。

HTML

<div class="box">
    Here is some text within this grey box; <a href="#">And here is the link</a>.
</div>

CSS

.box {
    background: grey;
    color: white;
    line-height: 24px;
    padding: 15px;
    width: 290px;
}
.box a {
    background: aqua;
    color: black;
    padding: 5px;
}

Answer 1

您正在寻找white-space: nowrap。

Updated Example

.box a {
    white-space: nowrap;
    background: aqua;
    color: black;
    padding: 5px;
}