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 link

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 link

• javascript
• css

• add a line break in between names? – Tyler Biscoe Commented Aug 9, 2012 at 14:17
• 1 Also, keep in mind that word-break doesn't seem to be patible with all browsers yet. – Tyler Biscoe Commented Aug 9, 2012 at 14:19
• @Tyler, adding a line in between names does not fit my purpose because if the two name can fit on the same line they should stay in one line. – Lorraine Bernard Commented Aug 9, 2012 at 14:20
• 1 What if you put no rule at all? Unless you want the trait d'union to be on the next line (which wouldn't be a natural behaviour), it should work correctly. – Jill-Jênn Vie Commented Aug 9, 2012 at 14:24
• @Jill-JênnVie this is a great idea. But in my web site it makes the last part of the long word hidden. If I fond the problem and I will be not able to fix it, I will update my question. thanks. – Lorraine Bernard Commented Aug 9, 2012 at 14:33

2 Answers 2

http://jsfiddle/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.

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.