只在必要时进行破解

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 link

Answer 1

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

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

Answer 2

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