How do you wrap long words on newline, and avoid horizontal scroll using CSS?

Question

I have the folowing html:

<div class="box">
    long text here
</div>

and css:

.box {
    width: 400px;
    height: 100px;
    overflow: auto;
    border: 1px gold solid; 
}

I want only a vertical scroll. But when a word is too long, a horizontal scroll is displayed. How do I make the long words wrap ?

If needed, I can use a trick with jQuery or PHP, but I would like to solve it using CSS, because it's CSS job.

You can fiddle here: http://jsfiddle.net/879bc/1/

Answer 1

word-wrap: break-word

https://developer.mozilla.org/en/CSS/word-wrap

Answer 2

For custom word breaking, there is an html special character that is not so often used- ­ (soft hyphen) - that will split words on 2 lines and insert a dash after the first part of the word if the word approaches the edge of its container. Trouble is, you'll have to place them everywhere you want them. As you say, though, you can also set up a js or php function, and insert them into the appropriate places.

Answer 3

The solution I have used in the past is an ellipsis library like http://dotdotdot.frebsite.nl/ for jquery, you can specify the number of chars and have it dot dot dot after that so it all fits on one line.