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

Question

I have the folowing html:

    long text here

and css:

.box {
    width: 400px;
    h         


        

Answer 1

word-wrap: break-word

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

Answer 2

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.

Answer 3

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.