环绕浮子时避免悬空文本

Question

图片说得最好：

这只是一张float: left图片（http://jsbin.com/itihes/1）。有没有办法在纯CSS中使用动态文本来防止这个问题？我确实希望文本换行，但如果它少于一整行（理想情况下是两个完整行），则所有文本都将保留在右侧的同一个块中。

图像宽度是固定的，但整个块的宽度是动态的。

Answer 1

DSKrepps得到了一点：你可以做的最接近的是每个

标签上的段落，这样该段落的剩余文本不会换行，但下一段是全宽

你要做的就是这样的事情

.text-div p:first-child {
    overflow:hidden;
    line-height:(a number matching (img height + bottom margin) divider)
}

这样，你的第一段不会包裹......但另一段<p>将

jsfiddle for you：http://jsfiddle.net/6FQuH/

否则 - ＆gt;的JavaScript

Answer 2

在这种情况下你唯一能做的就是将图像的边缘底部提升到大约。两倍的字体大小。 12px字体大小，24px边距底部。你仍然可以有一个孤儿，但在上面的例子中，文本将保持内联，而不会包装，对于更长的文本，它将正确包装。它留下了一个小窗口，你仍然可以有一行孤儿。

Answer 3

所以，你希望文本只有在足够长的时候才能换行，以免在照片下面看起来孤立。

不幸的是，单独使用CSS是不可能的。您可以做的最接近的事情是每个<p>标记上的段落，这样该段落的剩余文本不会换行，但下一段是全宽。像这样：http://jsbin.com/avogil/1/edit

当然，通过比较浮动图像的大小和段落的大小，并将差异与字体大小进行比较，也可以使用Javascript。你可能想要使用jQuery。

未来的CSS规范可能会在某一天解决这个问题。