Why doesn't word-wrap work properly in CSS3?

Question

Why doesn't word wrap property work properly in the example below?

http://jsfiddle.net/k5VET/739/

What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters to fit in each line.

The css is :

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-wrap:break-word;
    border:2px solid; }

Solution 1

Use word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
word-break: break-all;
    border:2px solid; }

LIVE DEMO

Solution 2

If word-wrap: break-all don't work, try also add this:

white-space:normal;

work for me with the .btn class in Bootstrap 3

Solution 3

Okay so I know this is an old question but I seriously think there could be some useful clarification of when to use which property. Looking at the existing answers, I feel they offer solutions without explanation so here is my attempt to help with that. For context, by default, the container will not try to break a single long word up because it wants to preserve the word in it's original form.

With that said, 3 main ways to break up words there is overflow-wrap, word-break, and hypens. I won't dive too deep into hypens though.

So first off. I see word-wrap is being used in the question but reading the documentation, that is deprecated and some browsers have decided to simply alias it to overflow-wrap. It's probably preferred not to use that.

The distinction between the two properties is pretty clear in the documentation but for clarity, overflow-wrap really only has two possible values and will detect if a word has been overflowed. If it does, by default it moves the entire word to the next line. If break-word is set, it will only break up the word if the entire word couldn't be placed on that line.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    overflow-wrap: break-word;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

You can see the pneumonoul... long word breaks exactly where it needs to on the next line after it attempts to separate the long word.

Now in contrast, we have word-break. This has more granular properties and actually also has a break-word option. This is synonymous to the above snippet so when to use one or the other I think is pretty trivial.

However, word-break also offers a break-all value which will break the word whenever possible to fit word where it was originally intended. It doesn't try to figure out if it needs the word to be on a new line or not -- it simply shoves the line break where it overflows. The biggest distinction here from the above is that long word we use is now still on the top.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-break: break-all;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

And then finally for hyphens have their own special way of breaking up words. For more info take a look at the documentation. Also worth noting that different languages have different ways of breaking up words but fortunately the hyphens property hooks into the lang attribute and understands what to do.

Another option people have suggested is using the white-space property which attempts to break up text through spaces. In the example I used, this doesn't help our situation because the word itself is longer than the container. I think the important thing to note about this CSS property is that this doesn't attempt to break up words within themselves and rather tries to do it via spaces whenever appropriate.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    white-space: normal;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

Hope this helps.

Solution 4

This is useful for wrapping text in one line:

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

Solution 5

It does not wrap properly, because browsers do not apply automatic hyphenation (which would be the way to cause proper wrapping) by default. You need to use CSS hyphenation or JavaScipt-based hyphenation. The setting word-wrap:break-word, as well as word-break: break-all, by definition breaks words (splits th em to piece s at arbit rary poin ts), instead of proper wrapping.

View more solutions

Comments

[long]

BTW: according to this: caniuse.com/#feat=word-break word-break doesn't work in Opera :/

[Jukka K. Korpela]

Breaking a word at an arbitrary point, without even adding a hyphen at the end of a line, is not correct by the rules of pig Latin, not to mention Latin or English.

[diplosaurus]

No idea why this works but this saved me a bunch of time, thanks!

[Daft]

Saved my day!! Cheers!

[Bimal Das]

Can u explain ?

[Admin]

Have no idea why but it saved my day!

[akavel]

I had white-space:nowrap inherited from some parent style, thanks to the above answer I found out that it was what blocked the wrapping. Thanks!

[Starfall Projects]

As with the other commenters, no clue why this helped, but it did!

[aug]

To follow up @JukkaK.Korpela comment (be it many years ago), this is why the hyphens CSS property exists which hooks into the lang attribute. In those situations it is preferable to use that instead. Please see my answer below.

[anarchist912]

Thanks. Got some clarity. However word-break does not seem to have a property of break-word according to the MDN web docs

[Brett]

word-wrap: break-all isn't valid; word-break: break-all is, but they do different things.

[franksands]

I looked it up and white-space: pre or white-space:no-wrap overrides text behavior and avoids text wrap

[Lonnie Best]

@anarchist912 break-word is included in the US version of the documentation. I don't understand why it is deprecated. For me, it is the only thing that does what I'm wanting. The docs say break-word has the same effect as word-break: normal and overflow-wrap: anywhere. So I tried doing that non-deprecated combination instead, but it didn't work. For me, deprecated or not, word-break: break-word is the only thing that acts sensibly.

[anarchist912]

@LonnieBest Which browsers?

[Lonnie Best]

@anarchist912 The latest stables of Chromium and Firefox.