html - CSS:内联 标签

Question

这是我的 HTML:

<p>The following text <pre>is an inline preformat block</pre> and will not be parsed.</p>

我希望它呈现为单行，在句子中间有一个预格式化 block 。但是，它呈现为三个单独的行:

---

以下文字

is an inline preformat block

并且不会被解析。

---

我想要的是将所有内容都放在一行中。我已经尝试将样式设置为使用 display:inline，但这只半途解决了我的问题:在预 block 的末尾没有引入换行符，但在开头仍然有一个。

正如其他地方所建议的那样，我尝试使用 white-space:nowrap，但它完全没有完成任何事情。

请不要提供基于 javascript 或 jquery 的解决方案。我想确保该解决方案适用于禁用脚本的浏览器。

Answer 1

解决方案 #1 使用 <pre> (不推荐):
您可以使用以下代码，但 <p>元素有点坏了。如果你想避免影响所有<p>元素，添加 class或 id属性为 <p>元素。

pre, p {
  display:inline;
}

<p>The following text <pre>is an inline preformat block</pre> and will not be parsed.</p>

解决方案 #2 使用 <code> :
更好的解决方案是替换 <pre>与 <code> .输出看起来与使用 <pre> 的解决方案相同元素。

<p>The following text <code>is an inline preformat block</code> and will not be parsed.</p>

解决方案 #3 使用 <span> :
如果您想自己定义元素，可以使用以下内容:

p span {
  font-family:monospace;
}

<p>The following text <span>is an inline preformat block</span> and will not be parsed.</p>