Word-break only if necessary

I need to do the following task via CSS:
I have a fixed width div.
In this div, I need to display the name, name and other name as follows.

Example 1

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

examaple 2

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

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

Example 1

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

What is the best way to fix this problem using CSS?
If this is not possible, what is the best fix using javascript?

Here is the jsfiddle.net link