尴尬的线环绕图像

Posted 2023-03-06

【中文标题】尴尬的线环绕图像

【英文标题】：Awkward line wrap around image

【发布时间】：2013-01-26 11:45:58

【问题描述】：

用一张图片可能最容易解释我想要什么：

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

我可以为图像添加更多的底部边距，具体取决于有多少尴尬的文本但在响应式设计中图像会缩小并且文本保持相同的大小，所以没有办法这样做对于每个断点处的每个图像。

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

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

谢谢

【问题讨论】：

我通常只是事先规划布局并使用网格来避免这些类型的问题，但有时当你无法避免时我就让它成为......

您希望它仅在文本量少时不换行还是始终不换行？

就个人而言，我会保留它；只是因为很难预测/可靠地定义有资格成为“尴尬位”的文本数量。

@liam - 这真的取决于。在上面的示例中，它不应该换行，但如果真的有两行，它应该换行。

【参考方案1】：

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

如果检查最后一个 TextRectangle 的左偏移量与倒数第二个 TextRectangle 的左偏移量不同，就知道最后一行是“散兵”，可以通过一个 TextRectangle 的高度调整图像的下边距（ bottom - top)。

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

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

【讨论】：

谢谢。它给了我一些东西可以继续。我通常一直忽略它，但它现在开始让我烦恼。 - 我知道我需要放弃一些控制权，但同时我正在努力使网站在所有屏幕宽度下都看起来最好。

【参考方案2】：

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

所以你的 html 最终会是这样的：

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

【讨论】：

如果有更多的文字，我相信他想要环绕效果。