html - 环绕浮动时避免悬空文本

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 为您服务：http: //jsfiddle.net/6FQuH/

否则 --> javascript

Answer 2

因此，您希望文本仅在其足够长且不会在照片下方显得孤立时才换行。

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

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

也许未来的 CSS 规范有一天会解决这个问题。

Answer 3

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