css - 用破折号列出，但不在新行的开头

在我的页面上，我想要一个看起来像这样的列表：

例如 ：

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

但是现在，假设您要调整屏幕大小，并且内容描述变为2行：

Michael Jackson
American Singer - Songwriter
Producer - Dancer - Actor

如何根据说明宽度在说明的第二行上加上破折号？像这样 ：

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中做到这一点？
谢谢

最佳答案

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

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

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