只在必要时进行破解

Question

我需要通过CSS实现以下任务:
我有一个固定宽度的div.
在这个div我需要以下面的方式显示名字,第二名和最终其他名字.

---

例1

---------------
First-Name 
Secondo-Name
---------------

examaple 2

---------------
Very-Long-First
-Name 
Second-Name
---------------

---

如果我尝试使用word-break: break-all; 它将适用于example 2但不适用于example 1:

例1

---------------
First-Name Seco
nd-Name
---------------

使用CSS解决此问题的最佳方法是什么？
如果不可能,使用javascript修复它的最佳方法是什么？

这是jsfiddle.net链接

Answer 1

http://jsfiddle.net/uNcCR/2/

我正在使用word-wrap: break-word,如果单词的宽度超过了宽度,则允许破坏名称div,否则它将在名称之间中断.无论如何,我认为这就是你要找的东西.

Answer 2

对于很长的名称，我认为打破下面行中显示的单词不是一个好主意。
我建议你使用 css 属性-moz-hyphens: auto。
这是参考css-hyphenation。