列出破折号但不在新行的开头

时间:2015-10-16 07:04:36

标签: css line-breaks hyphen

在我的页面上,我希望有一个如下所示的列表:

例如:

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

但现在,想象一下,如果你调整屏幕大小,描述行变为2行:

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中这样做? 感谢

1 个答案:

答案 0 :(得分:0)

考虑使用whitespace: nowrap;样式来防止意外的文本中断。

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

这会强制浏览器在连字符后面而不是在它之前回滚。