css - 如何防止 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（哎呀）

Answer 2

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

line-height:20px;

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

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

或更改文本的跟踪

letter-spacing: 0.1em;

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

hyphens: auto; 

但是，据我所知，我不知道任何消除文本孤儿的 CSS 规则。可能有脚本，但我从未听说过它，并且不久前对它进行了一些研究。希望它有所帮助:)

Answer 3

这就是浮动的工作原理。如果您不想要，请不要使用float; 例如，您可以使用定位，以便文本显示为图像右侧的块。

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

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

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

Answer 4

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