从两侧将文字环绕在图像或形状上 [英] wrap text around an image or shape from both sides

问题描述

如何在单个文本块中环绕任意放置的图像或形状的文本?

How can I have a text wrapping around an arbitrarily positioned image or shape within a single block of text?

_{图像是> https://www.sarasoueidan.com/blog的属性/css-shapes/}

请注意，我不是在寻找涉及文本单独列的解决方案，例如此利用shape-outside利用左/右float.

Note that I am not looking for a solution that involves separate columns of text such as this one which exploits left/right floats with shape-outside.

推荐答案

目前，此行为不受支持，但是为此提供了一个草稿.

At this moment, this behaviour is not supported, however, there is a draft for it.

更多阅读:
https://css-tricks .com/exclusions-希望会像更强大的grid-friendly-floats/
https://www.sarasoueidan.com/blog/css-shapes/
https://drafts.c​​sswg.org/css-exclusions-1/

More reading:
https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/
https://www.sarasoueidan.com/blog/css-shapes/
https://drafts.csswg.org/css-exclusions-1/

CSS排除模块第1级

编辑草稿，2020年1月16日

CSS排除项定义了任意区域，行内内容可以围绕这些区域流动.

CSS Exclusions Module Level 1

Editor’s Draft, 16 January 2020

CSS Exclusions define arbitrary areas around which inline content can flow.

---

CSS Shapes Module Level 2

请注意，还有一个shape-inside属性，可以将其用作具有适当多边形的解决方法，但已删除了对它的支持，并将实现推迟到

---

CSS Shapes Module Level 2

Note that there also was a shape-inside property, which would have been possible to use as a workaround with a proper polygon, but its support was removed and implementation postponed until https://drafts.csswg.org/css-shapes-2/. So right now, it is only possible to use shape-outside with a float-ing element.

> https://www.sarasoueidan.com/blog/css-shapes的 _{images属性/}

_{images property of https://www.sarasoueidan.com/blog/css-shapes/}

最初的Shapes规范包括用于在元素内部创建形状的属性shape-inside.此属性以及在非浮动元素上创建形状的可能性，已移至规范的第2级.由于shape-inside属性最初是在规范的1级中，因此您可以在网上找到详细介绍这两个属性的教程.
〜 MDN

The initial Shapes specification included a property shape-inside for creating shapes inside an element. This property, along with the possibility of creating shapes on non-floated elements, has been moved to level 2 of the specification. As the shape-inside property was initially in Level 1 of the specification, you may find tutorials on the web detailing both properties.
~ MDN

这篇关于从两侧将文字环绕在图像或形状上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！