html - 是否可以仅使用 CSS 来阻止单词换行？

Question

我们有一个被分成两行的名字列表，问题是名字不应该在中间分开。

我知道我可以使用 JS 通过添加额外的 DOM 或添加一个  (这一次我不能这样做)但是有没有办法只使用 CSS 来实现？

这...

Persons Name, Persons Name, Persons Name, Persons Name, Persons 
Name and Persons Name

应该是这样的吧

Persons Name, Persons Name, Persons Name, Persons Name, 
Persons Name and Persons Name

如果在这里忘记了一些简单的事情，请提前致歉，这是漫长的一天!

Answer 1

一种选择是在您不想拆分的单词之间使用 (不间断空格)。在下面的示例中，无论您如何调整浏览器窗口的大小，John Smith 都不会被拆分。

John Smith, John Smith, John Smith, John Smith, John Smith, John Smith, John Smith, John Smith, John Smith, John Smith, John Smith, John Smith

另一个主要只使用 CSS 的选项是使用样式 white-space: nowrap 但您需要将每个全名包装在 HTML 标签中，例如:

.dontbreak {
  white-space: nowrap;
}

<span class="dontbreak">John Smith</span>,  <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>, <span class="dontbreak">John Smith</span>,