javascript - 尴尬的线条环绕图像

Question

可能最容易用图像解释我想要的东西:

当我 float 图像时，文本围绕它运行，这很棒。但是，根据文本的数量和图像的大小，我经常会遇到这些尴尬的问题。在这种情况下，笨拙的文本在图像旁边的列中看起来会更好。

我可以根据有多少笨拙的文本为图像添加更多的底部边距但是在响应式设计中图像缩小并且文本保持相同大小所以没有办法这样做对于每个断点处的每个图像。

我可以在所有段落上使用“overflow:auto”，以便它创建一个新的布局上下文并阻止文本完全换行。但是当有足够的文本时，我希望文本 float ，但我又无法控制最终输出。

我有一种感觉，除非有一些过于复杂的 JS 可以在上面运行(并且可以处理响应式网站上的屏幕尺寸变化)，否则没有解决方案。所以我的问题是人们如何处理这个问题？忽略它？使用 JS？

谢谢

Answer 1

我不认为你可以在 CSS 中做到这一点。但是，我认为 JavaScript 也不会过于复杂。我建议使用 element.getClientRects() ，它返回 TextRectangle 对象的列表。对于行内元素，每个 TextRectangle 对象代表一行文本。

如果您检查最后一个 TextRectangle 的左偏移量与倒数第二个 TextRectangle 的左偏移量不同，您就知道最后一行是“散乱者”并且可以将图像的底部边距调整一个 TextRectangle 的高度( 底部 - 顶部)。

getClientRects 在 CSSOM 中被标准化，但是 may have buggy implementations在某些浏览器中。

从更个人的 Angular 来看，我会说我认为它看起来很好，如果我是你，我可能不会担心。