CSS对包含标签的p标签进行分词

Question

我的html如下

<p>Read the <a target="_blank" class="highlight" href="www.url.com">'Design Network Hierarchy and Settings'</a> chapter in your version's user guide to learn how to create the structure and framework of your network including the physical topology, network settings, and device type profiles that you can apply to devices throughout your network.</p>

段落的标签部分分成单独的行，如下所示：

但我希望将其视为统一的段落。

Answer 1

您可以设置显示：代码的内联块

Answer 2

没有任何CSS似乎可行。检查您的highlight类，它可能定义了一些使您的链接位于单独一行的内容。大概 display: block或display: inline-block。

尝试添加display: inline，它应该可以工作

p{
 width: 300px;
}

<p>
  Read the
  <a target="_blank" class="highlight" href="www.url.com">'Design Network Hierarchy and Settings'</a> chapter in your version's user guide to learn how to create the structure and framework of your network including the physical topology, network settings,
  and device type profiles that you can apply to devices throughout your network.
</p>

Answer 3

修复很简单，在标签中添加display:inline即可解决问题

Answer 4

使用white-space: nowrap;强制文本保持在同一行。 详细了解空白here

找到工作示例here

Answer 5

默认情况下，<a>标签是内联元素。确保您没有修改<a>的显示属性。您可以在浏览器中对其进行检查并轻松找到它。如果您注意到显示属性发生了变化，请通过应用display: inline

将其删除或覆盖