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

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.