html - 如何避免使用css一行出现孤词？

Question

我对孤儿词的意思是一行中的一个词。可以在 CSS 的帮助下避免任何只有一个单词的行吗？

例如 SERUM 是一个孤词：

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY
SERUM

它应该看起来像这样

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT
BODY SERUM

Answer 1

防止两个单词中断的一种快速简便的方法是 在单词之间插入一个非中断空格

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY SERUM

它不会在前端可见，但即使有足够的空间容纳其中一个，这些词也会保持在一起。

<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>