CODEWITHSUNDEEP
csshtmloverflow
Mark
Mark

Reputation: 69920

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="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

Upvotes: 1

Views: 611

Answers (3)

Jared Farrish
Jared Farrish

Reputation: 49188

You can use the overflow css declaration.

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

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228152

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/

Upvotes: 3

Ron Harlev
Ron Harlev

Reputation: 16663

use CSS overlflow with hidden

Upvotes: 0

Related Questions