我经常在图像周围包裹文字，有时文字包裹起来很笨拙，如下所示：
在 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>
...
这在大多数情况下都有效，除非文本长度恰好超过图像底部并流回到左边距，并且文本量不够长，无法填充超过一行（在这种情况下，它是只有一个字）。当这种情况发生时，看起来真的很糟糕。
那么，有没有办法控制文本流以免发生这种情况呢？
你可以做的是添加overflow: hidden to the p有文本的标签。这将使图像后面环绕的任何文本都与较大的部分对齐。现在，当您有大段落时，这可能看起来很有趣，但是如果您的段落都相当短，这应该会有所帮助。
例子：http://jsfiddle.net/8ZsKy/2/ http://jsfiddle.net/8ZsKy/2/
或者，您可以只添加一个类规则并将其应用于潜在的“问题”段落。
p.wrap-inline {
overflow:hidden;
}
EDIT：更新了 jsfiddle （哎呀）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
