在一行上显示HTML文本

Question

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

这是我目前编码的内容：

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

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

如何在一行显示文字？

Answer 1

应该这样做：

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

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

inline和block之间的差异在HTML / CSS中非常重要。您还会发现css display属性的其他值，这是一个非常有用的inline-block，它将block和inline中的其他一些优势放在一起。

Answer 2

此问题的解决方法很简单：只使用<span>代替<p>：

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

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

<span>标记是一个简单的文本范围，不会导致换行符。

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

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

Answer 3

您可以使用CSS更改<p>的显示方式。正常模式为block;更改为inline将阻止换行。

p.text-success {
  display: inline;
}

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