我怎样才能防止HTML文本孤儿？ [英] How can I prevent HTML text orphans?

问题描述

stack.imgur.com/RJeUa.pngalt =

在HTML中，图像浮动到左侧，文本简单地遵循：

 < p>< img style =float：left; src =/ images / [image]/>< / p> 
< p>这是我的David Copperfield，< em>我出生了< / em>一种生物。有关更简洁的信息，请参阅< a href =/ jenny / press-kit＃bio>新闻资料夹< / a>。< / p> 
 ... 
  

这大部分工作原理，除非文本长度碰巧经过图像的底部并返回到左边距，当文本的数量不足以填充多行时（在这种情况下，它只有一个单词）。当发生这种情况时，它看起来真的很糟糕。

那么，有没有办法控制文本流以避免发生？

$ b $你可以做的是将 overflow：hidden 添加到 p

/ code>标签有文字的地方。这将使它在图像后的任何文字都与大部分相符。现在，当你有很大的段落时，这可能看起来很有趣，但是如果你的段落都很短，这应该会有帮助。

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

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

  p.wrap-inline {
 overflow：hidden ; 
} 
  

编辑：更新了jsfiddle（oops） p>

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?

解决方案

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)

这篇关于我怎样才能防止HTML文本孤儿？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！