如何停止将多词链接放在一个新行上,而不是像普通文本一样将它们分开?

How to stop multi-word links being placed together on a new line, instead splitting them up like regular text?

我有一个由 Wordpress 驱动的网站,在我的一篇帖子中有以下文字。

任何对解释实用程序的不同方式感兴趣的读者都可以阅读 Ordinal and Cardinal Utility.

之间的区别

如果 Wordpress 无法将所有文本“Ordinal and Cardinal Utility”与“between”放在同一行,它会将其全部放在一个全新的行中,这看起来非常笨拙,尤其是在移动设备上。因为它是一个超链接,所以优先将其作为一个项目保留,而我很高兴将单词分成多行,就像它不是超链接时一样。我知道这是一个基本问题,但出于某种原因我还没有在网上找到任何解决方案。有解决这个问题的简单方法吗?

您正在寻找的 CSS 属性 是 white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element 是一个 inline 显示,它允许文本换行。

这里有几个例子:

div {
  width: 200px;
  background: #e4e6e9;
  padding: 10px;
  margin: 10px;
}

a {
  background: #0094ee;
  color: #fff;
  text-decoration: none;
}

.ib {
  display: inline-block;
}

.ws-nw {
  white-space: nowrap;
}
<div id="a">
  Usually, <a href="#">links are "inline" which means they wrap around once they hit</a> the side of the container.
</div>

<div id="b">
  You can have them <a href="#" class="ib"> set to inline-block to prevent broken wrapping</a>, but the text still wraps. inside the block
</div>

<div id="c">
  You can avoid <a href="#" class="ws-nw">any wrapping at all by setting</a> it to white-space: nowrap;. Be careful on <a href="#" class="ws-nw">super long text though because it can cause unexpected results on small containers</a>.
</div>