环绕浮动时避免悬空文本答案

【问题标题】：Avoiding dangling text when wrapping around a float环绕浮动时避免悬空文本
【发布时间】：2013-08-30 22:32:10
【问题描述】：

图片说明了最好的：

这只是一个float: left 图像 (http://jsbin.com/itihes/1)。有什么办法可以防止纯 CSS 中的动态文本出现这个问题？我确实希望文本换行，但如果它少于一整行（理想情况下是两整行），所有文本都将保留在右侧的同一块中。

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

【问题讨论】：

【解决方案1】：

DSKrepps 得到了一点：你能做的最接近的事情是在每个段落上逐段

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

你要做的就是这样

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

这样，您的第一段不会被包裹在 .. 下，但另一个 <p> 会

否则 --> javascript

【讨论】：

【解决方案2】：

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

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

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

也许未来的 CSS 规范有一天会解决这种情况。

【讨论】：

【解决方案3】：

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

【讨论】：