CSS:内联一个<pre>标签

Question

这是我的HTML:

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

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

---

以下文字

is an inline preformat block

并且不会被解析.

---

而我想要的就是让一切都在一条线上.我已经尝试设置要使用的样式display:inline,但这只能解决我的问题:在预阻塞结束时没有引入换行符,但在开始时仍然有一个换行符.

正如其他地方所建议的那样,我尝试过使用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>