Wortumbrüche nur wenn nötig

Question

Ich muss die folgende Aufgabe durch CSS erreichen:
Ich habe ein Div mit einer festen Breite.
In diesem Div muss ich den ersten Namen, den zweiten Namen und eventuell weitere Namen auf folgende Weise anzeigen.

---

Beispiel 1

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

Beispiel 2

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

---

Wenn ich versuche, die word-break: break-all; es funktioniert für die example 2 aber nicht für die example 1 die sein wird:

Beispiel 1

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

Wie lässt sich dieses Problem am besten mit CSS beheben?
Wenn dies nicht möglich ist, wie kann man es am besten mit Javascript beheben?

Hier ist die jsfiddle.net Link

Answer 1

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

Ich benutze word-wrap: break-word um zu ermöglichen, dass die Namen unterbrochen werden, wenn die Breite des Wortes die Breite des Feldes div sonst bricht er zwischen den Namen ab. Ich denke, das ist es, wonach Sie ohnehin suchen.

Answer 2

Bei sehr langen Namen halte ich es nicht für eine gute Idee, das Wort zu unterbrechen und es in der Zeile darunter anzuzeigen.
Ich schlage vor, dass Sie die css-Eigenschaft -moz-hyphens: auto .
Hier ist die Referenz css-Silbentrennung .