如何防止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

这就是浮动的方式。如果您不想这样，请不要使用float;你可以，例如改为使用定位，以便文本在图像右侧显示为一个块。

遗憾的是，没有办法使用浮动和请求，例如最后一行不应该短。您可以通过在它与前一个单词之间使用不间断空格来阻止最后一个单词出现在它自己的一行上，例如it will。你可以将它扩展为一组简短的单词。但这只是意味着该组出现在它自己的一条线上，而前一条线相应地更短（因此可能看起来很奇怪）。

如果文字有点太长，您可以修改其渲染以减少垂直占用的空间，例如通过删除段落之间的空行，虽然这将是一个主要的布局更改（虽然可能是一个很好的）：

p { margin: 0 }
p + p { text-indent: 1.3em; }

Answer 2

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

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

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

p.wrap-inline {
    overflow:hidden;
}

编辑：更新了jsfiddle（oops）

Answer 3

这个问题实际上让我思考，虽然它有时候很烦人，过去我通过稍微调整线高来解决了类似的问题，

line-height:20px;

或者将图像的实际尺寸调整得更大或更小，

<img style="float:left;" src="/images/[image]" width="100" height="200" />

或更改文字的跟踪

letter-spacing: 0.1em;

或使用连字符（我不喜欢或推荐它）

hyphens: auto; 

然而据我所知，我不知道消除文本孤儿的任何css规则。可能有脚本，但我从来没有听说过它，并且前一段时间对它进行了一些研究。希望它有所帮助：）

Answer 4

<img style="float:left; clear="both" src="/images/[image]" />