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; }

Answer 1

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