Content overflows outside the <div>

The content of a <div> element, if it has no spaces, overflows outside the container.

Is there a trick to fix this with a new line, on all browsers?

For example:

<div style开发者_C百科="width: 500px;">

    <div style="border: 1px solid #000;">
        <p>http://www.trendn.com/timthumb.php?src=http%3A%2F%2Fwww.blogcdn.com%2Fwww.engadget.com%2Fmedia%2F2011%2F04%2F11x0419n873422_thumbnail.jpg</p>
    </div>

</div>

Thanks

If I understand correctly: (not sure that I do, as I'm posting a different answer to those already here)

Use the white-space property (or an equivalent property for IE).

#divElement {
    word-wrap: break-word;      /* IE 5.5-7 */
    white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
    white-space: pre-wrap;      /* current browsers */
}

See here: http://jsfiddle.net/thirtydot/RE5uG/

use CSS overlflow with hidden

You can use the overflow css declaration.

See: http://www.quirksmode.org/css/overflow.html

http://jsfiddle.net/userdude/pr2k7/