如何使文本在CSS中的不规则形状周围流动 [英] How to get text to flow around irregular shape in CSS

问题描述

我试图找出如何使文本在页面上以不规则形状流动的方法，而且运气不好，无法确定如何做我想做的事情.

我附上一张图片，显示了我要使用的布局.

我希望文本按照其在图像中的显示方式流动.我在MS Paint中进行了此模拟.

每个页面上都可以包含任何内容，因此我宁愿不必手动调整每个页面上的文本.左上角将始终是相同的，因此理想情况下，我将添加一条CSS规则，无论文本内容实际是什么，该规则都可以使文本以这种方式运行.

解决方案

当前尚不被广泛支持，但是您可以使用 shape-outside CSS声明来达到预期的效果:

请注意，这仅是示例，并非您问题的确切解决方案

  .element {形状外:多边形(0 0，0 100％，100％100％);宽度:20em;高度:40em;} 

这将创建一个三角形区域(三边形多边形)，文本将不会输入.可以使用 polyfill github上用于不支持此功能的浏览器.

网络上有一些关于 shape-outside 的好文章，特别是在列表分开.

在SO上还有一个类似的问题是几年前提出的，可能有用.

添加了代码段-该示例似乎仅在不使用polyfill的Chrome中可用

  .wrapper {宽度:300像素；}.元素 {形状外部:多边形(0 0，100px 0，0 100px);宽度:100px；高度:100px；向左飘浮;}  

 < div class ="wrapper">< div class ="element"></div>< p> Lorem ipsum dolor坐着，安全地服从精英，seu do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 p 
 p 
 p 
 p 
 p 
 p 
和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</div>  

I'm trying to figure out how to get text to flow around an irregular shape on a page, and am not having much luck figuring out how to do what I am trying to do.

I attached an image showing the layout the I am trying to use.

I want the text to flow the way it does in the image. I did this mock-up in MS Paint.

Each page could have any content on it, so I'd rather not have to manually adjust the text on each page. The top-left corner will always be the same, so ideally there would be a CSS rule I could add that could make the text behave this way no matter what the text content actually was.

解决方案

It currently isn't widely supported but you could use the shape-outside CSS declaration to achieve the desired effect:

Note this is only an example and not the exact solution to your problem

.element{
    shape-outside: polygon(0 0, 0 100%, 100% 100%);
    width: 20em;
    height: 40em;
}

This would create a triangular area (three-sided polygon) that the text would not enter. A polyfill is available on github for browsers that don't support this feature.

There are a few good articles on the web about shape-outside, notably on HTML5 Rocks and A List Apart.

There is also a similar question on SO that was asked a couple of years ago, which could be of some use.

Edit: Added code snippet - the example appears to work in Chrome only without the polyfill

.wrapper {
    width: 300px;
}

.element {
    shape-outside: polygon(0 0, 100px 0, 0 100px);
    width: 100px;
    height: 100px;
    float:left;
}

<div class="wrapper">
    <div class="element"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

这篇关于如何使文本在CSS中的不规则形状周围流动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！