HTML 防止部分文本转到下一行

Question

我在网页上显示长文本，我使用段落标签来分隔我的句子。但是，当我的第一组文本显示一半时，下一行显示了句子。

<p>This is some random text that I am typing on the screen for an example. </p>
<p>My second line for this example </p>

以下是屏幕上显示的内容：

This is some random text that I am
typing on the screen for
an example.
My second line for this example

对于这种情况，“示例”应该在第二行，但事实并非如此。有没有办法来解决这个问题？

Answer 1

如果您想将 'p' 的所有内容保留在一行中，您可以使用以下命令：

p {
    white-space: nowrap;
} 

但是，当您的文本显示在手机上时，这可能会产生负面影响 - 文本行可能会变得太宽。

您可以在跨度中插入文本行以避免在所有段落上出现“白色跨度”：

<p>This is some random text that I am <span style="white-space:nowrap">typing on the screen for an example.</span></p>
<p>My second line for this example</p>