如何避免 css 行中的孤词？

Question

我所说的孤词是指一行中的一个词。可以在 CSS 的帮助下避免任何只有一个单词的行吗？

例如 SERUM 是一个孤词：

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY
SERUM

它应该看起来像这样

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT
BODY SERUM

Answer 1

防止两个单词断开的一种快速简便的方法是在单词

之间插入一个不断开的space  

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY SERUM

它在前端是不可见的，但即使有足够的 space 只显示其中一个词，这些词也会保持在一起。

<h2>ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY&nbsp;SERUM</h2>

Answer 2

你可以用 white-space: nowrap

span {
  white-space: nowrap;
}

<h2>ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT <span>BODY SERUM</span></h2>