如何用HTML和CSS实现整句强制换行，避免局部自动折行？

方案1：直接调整HTML结构（最简单） #

在第一句末尾加<br>标签，强制第二句换行，不管屏幕大小都能让第二句完整显示在新行：

<p>This is my first sentence.<br> This is my second sentence that should be on the next line.</p>

方案2：CSS控制第二句整体换行（适合响应式场景） #

如果希望大屏幕时两句在同一行，小屏幕时第二句整体跳到下一行且不被折开，可以给第二句套个<span>，再用CSS禁止折行：

修改后的HTML： #

<p>This is my first sentence. <span>This is my second sentence that should be on the next line.</span></p>

对应的CSS： #

span {
  white-space: nowrap;
}

这样屏幕宽度足够时两句同行，宽度不足时第二句会整体换行，且始终保持完整不拆分。

方案3：无额外标签，利用文本换行+CSS #

在原文本的第一句末尾手动加个换行，再用white-space: pre-line让浏览器识别这个换行（如果第二句特别长，极小屏幕下还是会折行，适合不需要第二句绝对不折行的场景）：

修改后的HTML： #

<p>This is my first sentence.
This is my second sentence that should be on the next line.</p>

对应的CSS： #

p {
  white-space: pre-line;
}

内容的提问来源于stack exchange，提问作者Trevor