如何防止HTML文本孤儿？

Question

我经常有一个图像,我包裹文本,有时文本包装笨拙,如下:

在HTML中,图像浮动到左侧,文本简单如下:

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

这主要是有效的,除非文本长度恰好超过图像的底部并流回到左边距,并且当文本量不足以填充多行时(在这种情况下,它是只有一个字).当发生这种情况时,它看起来非常糟糕.

那么,有没有办法控制文本流,以便不会发生这种情况？

Answer 1

您可以做的就是添加overflow: hidden到p有文本的标签中。这将使图像后面的任何文本都与较大的部分对齐。现在，当您有大段落时，这可能看起来很有趣，但是如果您的段落都相当短，这应该会有所帮助。

示例： http: //jsfiddle.net/8ZsKy/2/

或者，您可以只添加一个类规则并将其应用于潜在的“问题”段落。

p.wrap-inline {
    overflow:hidden;
}

编辑：更新了 jsfiddle （哎呀）