user930514 user930514 - 5 months ago 22
CSS Question

CSS word-wrap not working as expected

Why doesnt 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

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

Comments