javascript - 只在必要时断字

Question

我需要通过 CSS 实现以下任务:
我有一个固定宽度的 div。
在这个 div 中，我需要按以下方式显示名字、第二个名字以及最终其他人的名字。

---

例子一

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

示例 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 的宽度时断开名称，否则它会在名字之间中断。我想这就是您要找的东西。