Comments on: My Text Runneth Over

Question: My Text Runneth Over

jasondigitized — Wed, 29 Nov 2006 14:22:05 -0800

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?

By: cillit bang

cillit bang — Wed, 29 Nov 2006 15:01:59 -0800

This is one of those times you really need to link to an example (yes, self links are allowed).

By: DrJohnEvans

DrJohnEvans — Wed, 29 Nov 2006 16:00:44 -0800

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.)

By: Emperor SnooKloze

Emperor SnooKloze — Wed, 29 Nov 2006 16:12:56 -0800

Ditto on the link, please, and what platform/browser you're seeing problems in.

By: drjimmy11

drjimmy11 — Wed, 29 Nov 2006 17:30:40 -0800

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

By: Khalad

Khalad — Wed, 29 Nov 2006 21:01:10 -0800

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.

By: Invoke

Invoke — Wed, 29 Nov 2006 23:06:18 -0800

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');