在我的页面上,我希望有一个如下所示的列表:
例如:
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 - Songwriter - Producer - Dancer - Actor</div>
有没有办法在css中这样做? 感谢
答案 0 :(得分:0)
考虑使用whitespace: nowrap;
样式来防止意外的文本中断。
您可以将此样式应用于单词/连字符对。例如<span class="nowrap">American Singer -</span>
。
这会强制浏览器在连字符后面而不是在它之前回滚。