在一行中显示 HTML 个文本

Question

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

这是我目前编写的代码：

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

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

如何在一行中显示文本？

Answer 1

这个问题的修复很简单：只需使用  而不是 :

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

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

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

另外还可以在其两边加上，强制浏览器不换行（没有br代表不换行）：

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

Answer 2

这应该可以解决问题：

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

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

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

Answer 3

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

p.text-success {
  display: inline;
}

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

Display HTML text on one line