My Text Runneth Over

November 29, 2006 2:22 PM

I am inserting a large amount of links and text into a DIV tag using innerHTML after a page loads. For some reason, the HTML I am inserting is overflowing to the right of the DIV and not wrapping. I have a feeling, the browser cannot perform its normal text-wrapping because I am adding the HTML after the fact. Is there any technique via CSS or javascript to prevent this overflow from happening?
posted by jasondigitized to technology (6 comments total)

This is one of those times you really need to link to an example (yes, self links are allowed).
posted by cillit bang at 3:01 PM on November 29, 2006

Yes, any number of things could be going wrong here. If this happened to me, first things I would do is validate: both my original source, and my post-insertion generated source.

(The Firefox web developer toolbar is your friend.)
posted by DrJohnEvans at 4:00 PM on November 29, 2006 [1 favorite]

Ditto on the link, please, and what platform/browser you're seeing problems in.
posted by Emperor SnooKloze at 4:12 PM on November 29, 2006

is it because it's a very long text string with no spaces? if so, then it will bust out of a table or div- there is a css property which i dont recall right now, but it can be used to force word wrap...

I dont think using innerHTML should break word wrap, but I could be wrong. You could also try having a table inside yoru div- they tend to be more "sturdy."
posted by drjimmy11 at 5:30 PM on November 29, 2006

I have a feeling, the browser cannot perform its normal text-wrapping because I am adding the HTML after the fact.

No, that's not the problem. Browsers are very, very good about handling JavaScript page modifications correctly. Some possible reasons off the top of my head:

* You have long words that don't wrap, or have non-breaking spaces ( ) in there.
* Your <div> is wider than the page for whatever reason, which makes the text go beyond the screen edge. Maybe it has 100% width and its parent element is really wide, or maybe there's a wide image inside the <div>.
* You're in a <pre> element.
* Your <div> has the CSS rule "white-space: nowrap" applied to it some how.
* Your <div> has a non-default value for the "overflow" CSS property.
posted by Khalad at 9:01 PM on November 29, 2006

Khalad has it right, the browser will not have any problem wrapping once the CSS is correct. But to be honest, I usually don't use such "low level" javascript any more (manipulating innerhtml directly), due to the constant pain of trying to make IE obey anything close to the javascript every other browser seems to understand.

Instead, I use frameworks such as jquery which make adding html this easy:

$('#example').html('here is some html which will get subbed into the html of the #example div');
posted by Invoke at 11:06 PM on November 29, 2006