图像周围的换行不和谐

Question

可能最容易通过一张图片来解释我所需的内容：

当我浮动一个图像时，文字围绕它运行，这很好。但是，根据文本量和图像大小，我经常会留下这些尴尬的部分。在这种情况下，尴尬的文本将更适合在图像旁边的列中。

我可以根据有多少尴尬的文本来添加更多的底部间距 ，但在响应式设计中，图像缩小而文本保持相同的大小，因此无法对每个断点上的每个图像执行此操作。

我可以在所有段落上使用“overflow：auto”，以便它创建新的布局上下文并完全停止文本折叠。但是，当有足够的文本时，我希望文本浮动，并且我无法控制最终输出结果。

我有一种感觉，除非有一些过于复杂的JS可以在此运行（并且可以处理响应式网站上的屏幕大小更改），否则就没有解决方案。那么我的问题是人们如何处理这个问题？忽略它？使用JS？

谢谢

- user1010892

---

通常我会在开始前规划好布局，并使用网格来避免这些问题，但有时候无法避免，我就让它自然发展。 - elclanrs

你想让它仅在文本很少时不换行，还是总是不换行？ - Liam

个人而言，我会保持原状；因为很难可靠地预测或定义哪些文本属于“尴尬的部分”。 - David Thomas

@liam - 这取决于情况。在上面的例子中，它不应该换行，但是如果实际有两行，则应该换行。 - user1010892

Answer 1

我认为你不能用CSS实现这个功能。然而，我认为JavaScript也不会太复杂。我建议使用element.getClientRects()，它返回一个 TextRectangle 对象列表。对于行内元素，每个 TextRectangle 对象代表一行文本。

如果检查最后一个 TextRectangle 的左偏移与倒数第二个 TextRectangle 的左偏移不同，那么您就知道最后一行是“散兵”，并且可以通过一个 TextRectangle 的高度（bottom - top）调整图像的底部边距。 getClientRects 在 CSSOM 中已经标准化，但在某些浏览器中可能存在错误的实现。

从更个人的角度来看，我认为它看起来已经很好了，如果我是你，我可能不会担心它。

- Andy E

---

谢谢这个。它给了我一些方向。我通常忽略它，但现在它开始让我感到烦恼了。- 我知道我需要放弃一些控制，但同时我也在努力使网站在所有屏幕宽度下看起来最好。 - user1010892

Answer 2

最简单的解决方法是在您的文本周围添加另一个DIV，并将其左浮动。

因此，您的HTML将变成：

<div>
    <img src="">
    <div>
        My text...
    </div>
</div>

- Billy Moat

---

我相信他希望在有更多文本时出现换行效果。 - Andy E