如何停止将多词链接放在一个新行上,而不是像普通文本一样将它们分开?
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>
我有一个由 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>