CODEWITHSUNDEEP
javascriptcss
Lorraine Bernard
Lorraine Bernard

Reputation: 13420

Word-break only when necessary

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

Upvotes: 5

Views: 3062

Answers (2)

antonjs
antonjs

Reputation: 14318

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.

Upvotes: 2

Tyler Biscoe
Tyler Biscoe

Reputation: 2422

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.

Upvotes: 8

Related Questions