防止链接中断字-CSS

Question

我有一些链接，希望在wrap需要使用a时不会被破坏。我希望将整个链接移到另一行而不是链接的一半。

这是一个例子

有什么方法可以让班级仅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。

更新示例

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