在一行上显示 HTML 文本答案

【问题标题】：Display HTML text on one line在一行上显示 HTML 文本
【发布时间】：2016-11-23 07:18:55
【问题描述】：

我正在编写一个 MVC 5 视图，我在一些绿色文本之后，与普通文本在同一行上的 class="text-success" Bootstrap 类相同。

这是我目前编写的代码：

Test Text: <p class="text-success">Yes</p>

然而，这会在下一行显示绿色的"Yes"，而不是与"Test Text:" 在同一行。

如何在一行中显示文本？

【问题讨论】：

【解决方案1】：

这应该可以解决问题：

<p>Test Text: <span class="text-success">Yes</span></p>

说明：  是一个块元素，因此在其块中显示整个宽度（如果未在 CSS 中另行指定），前后各有一个新行。  是一个内联元素，只取所需的宽度，不强制换行。

inline 和block 的区别在 HTML/CSS 中是非常重要的。您还将发现 css display 属性的其他值，一个非常有用的值是 inline-block，它结合了 block 和 inline 的一些优点。

【讨论】：

【解决方案2】：

您可以使用 CSS 更改  的显示方式。普通模式为block；更改为 inline 将防止换行。

p.text-success {
  display: inline;
}

Test Text:
<p class="text-success">Yes</p>

【讨论】：

虽然 100% 正确，但我认为使用现有的内联标签比强制块标签内联更好。在这种情况下，您的解决方案意味着一个额外的 CSS 规则，您可以通过使用标准标记来避免，这也将在我看到它的地方更具语义（“测试文本：”它与绿色文本相关联，因此它是退出逻辑它在同一段中......）

【解决方案3】：

解决这个问题很简单：只需使用 而不是：

Test Text: <span class="text-success">Yes</span>

这背后的原因是，标签被定义为段落并自动导致换行（如果定义没有通过CSS更改）。

 标签是一个简单的文本跨度，不会导致换行。

此外，您还可以在其周围添加，以强制浏览器不换行（没有br代表不换行）：

<nobr>Test Text: <span class="text-success">Yes</span></nobr>

【讨论】：