尴尬的线包围图像 [英] Awkward line wrap around image

问题描述

可能最简单的解释一下我的形象：

Probably easiest to explain what I'm after with an image:

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

When I float an image the text runs around it which is great. BUT, depending on the amount of text and the image size, I'm often left with these awkward bits. In this case the awkward text would look better in the column next to the image.

我可以添加更多的底部边距根据多么尴尬的文本有一个响应式设计中的图像缩小和文本保持相同的大小，所以没有办法这样做每个图像的每个断点。

I could add more bottom margin to the image depending on how much awkward text there is BUT in a responsive design the image shrinks and the text stays the same size so there is no way of doing this for every image at every break point.

我可以在所有段落中使用overflow：auto，以便创建新的布局上下文并停止文本完全包装。但我想要文本浮动时，有足够的文本，我再也无法控制最终输出。

I could use "overflow:auto" on all paragraphs so that it creates a new layout context and stops the text from wrapping altogether. BUT I want the text to float when there is enough text and again I don't get control over the final output.

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

I have a feeling that unless there's some overly complicated JS that can run on this (and can handle the screen size changing on a responsive site) there is no solution. So my question would be how do people handle this? Ignore it? Use JS?

感谢

推荐答案

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

I don't think you can do this in CSS. However, I don't think the JavaScript would be overly complicated either. I'd recommend using element.getClientRects(), which returns a list of TextRectangle objects. For inline elements, each TextRectangle object represents a line of text.

如果您检查最后一个TextRectangle的左偏移量与倒数第二个TextRectangle的左偏移量不同，则您知道最后一行是一个straggler调整图像的底部边距一个TextRectangle（ bottom-top ）的高度。

If you check that the left offset of the last TextRectangle is different to the left offset of the penultimate TextRectangle, you know that the last line is a "straggler" and can adjust the image's bottom margin by the height of one TextRectangle (bottom - top).

getClientRects 在CSSOM中已标准化，但可能有错误的实施<

getClientRects was standardised in CSSOM, but may have buggy implementations in some browsers.

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

From a more personal point of view, I'd say that I think it looks fine the way it is and I probably wouldn't worry about it if I were you.

这篇关于尴尬的线包围图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！