是否可以仅使用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

其中一种选择是在您不想拆分的单词之间使用&nbsp（不间断空格）。在下面的示例中，无论您如何调整浏览器窗口的大小，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>,