带有破折号但不在新行开头的列表

Question

在我的页面上，我想要一个如下所示的列表：

例如：

Michael Jackson
American Singer - Songwriter - Producer - Dancer - Actor

但是现在，想象一下如果你调整屏幕大小，描述行变成两行：

Michael Jackson
American Singer - Songwriter
Producer - Dancer - Actor

如何根据diw宽度在描述的第二行没有破折号？像这样：

Michael Jackson
American Singer - Songwriter
Producer - Dancer - Actor

以我的 jsfiddle 为例：https://jsfiddle.net/k3mqf6uc/1/

Michael Jackson
<div id="list">American Singer -&nbsp;Songwriter -&nbsp;Producer -    &nbsp;Dancer -&nbsp;Actor</div>

有没有办法在 css 中做到这一点？ 谢谢

Answer 1

考虑使用whitespace: nowrap; 样式来防止不必要的文本中断。

您可以将此样式应用于单词/连字符对。例如<span class="nowrap">American Singer -</span>。

这会强制浏览器在连字符之后而不是在它之前换行。