Word-break only when necessary

Question

I need to achieve the following task through CSS:
I have a div with a fix width.
In this div I need to display first name, second name and eventually others name in the following way.

---

example 1

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

examaple 2

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

---

If I try to use the word-break: break-all; it will work for the example 2 but not for the example 1 which will be:

example 1

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

What is the best way to fix this problem just using CSS?
If it will be not possible, what is the best way to fix it by using javascript?

Here is the jsfiddle.net link

Answer 1

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

I'm using word-wrap: break-word to allow for the names to be broken if the width of the word exceeds the width of the div, otherwise it will break in between the names. I think that's what you're looking for anyway.

Answer 2

For very long name I don't think is a good idea to break the word displaying it on the line below.
I suggest you to use the css property -moz-hyphens: auto.
Here is the reference css-hyphenation.