How can I prevent HTML text orphans?

Question

I often have an image that I wrap text around, and sometimes the texts wraps awkwardly, like so:

In the HTML, the image is floated to the left and the text simply follows:

<p><img style="float:left;" src="/images/[image]" /></p>
<p>This is my David Copperfield, <em>I was born</em> kind of bio.  For a more concise one, please see the <a href="/jenny/press-kit#bio">press kit</a>.</p>
...

This mostly works, except when the text length just happens to run past the bottom of the image and flow back to the left margin, and when the amount of text isn't long enough to fill more than one line (in this case, it's only one word). When that happens, it looks really bad.

So, is there a way to control the text flow so that this doesn't happen?

Answer 1

What you could do is add overflow: hidden to the p tags where there is text. This will make it so any text that wraps after the image will be in line with the larger part. Now when you have large paragraphs this may look funny, however if your paragraphs are all fairly short this should help.

Example: http://jsfiddle.net/8ZsKy/2/

alternately you could just add a class rule and apply it to potential "problem" paragraphs.

p.wrap-inline {
    overflow:hidden;
}

EDIT: updated jsfiddle (oops)