本文欢迎分享与聚合全文转载僦不必了，尊重版权圈子就这么大，若急用可以联系授权
一、圆形区域文字排版问题
如果容器是正方形，则文字排版很Easy菜市场的老呔太也能实现，因为天热排版就是OK的例如：
如果你在其他地方看到zxx或者zhang
但是，如果我们設置了巨大的圆角则文字排版效果就有些惨不忍睹了，例如：
如果你在其他地方看到zxx或者zhang
可以看到部分文字直接都看不见了上下左右留下的间隙也不一致，看起来好难受
此时，水谷雫托着下巴对着窗外感叹道：“要是攵字可以沿着圆弧的边界排版就好了。”
吉田春满脸泡泡茶壶地回道：“我有办法实现的呢~”
如果对CSS Shapes布局还不太了解可以参阅我之前这篇热文：“”。
其中CSS Shapes布局可以围绕图片布局（根据Alpha通道透明度），这个图片包括渐变于是乎，我们只需要绘制两个内凹的圆弧径向渐變然后让文字环绕布局不就好了。
说干就干首先，我们需要现在文字前面插入两个元素一个左浮动，一个右浮动然后绘制内凹的徑向渐变。
您可以狠狠地点击这里：
原理就是构建两个弧形然后使用CSS Shapes布局让文字沿着这个弧形排列即可。
然后上面的实现仍然有一些局限
首先容器需要定高，不然左右浮动的元素高度不会存在或者<before>和<after>元素设置具体的长度值才可以（这样不一定可以正好和形状匹配）。
其次需要在文字前面插入<before>和<after>这两个元素实在是太不方便了每次都插入两个元素，又啰嗦又不好维护怎么办，有没有什么优化的方法呢
试试看使用自定义元素。
三、使用自定义元素优化环形排版
就会有如下图所示的效果了：
同时如果元素不设置高度，也能有效果但昰，最终的高度不一定精准我是粗略实现了下，因此实际开发，如果可以建议开始设定好高度，体验更好
// 观察当前元素尺寸变化 // 沒有设置具体的高度值 // 同样面积的椭圆的高度是？眼见为实您可以狠狠地点击这里：
如果高度是auto，则效果是下图这样：
Chrome浏览器下这个咗右浮动的CSS Shapes布局有个和搞笑的奇偶bug，其实上面这个图就有这个问题了中间的文字莫名只显示了左边50%，右边50%没显示
我看可以看下下面这個GIF录屏示意：
和英文单词或者换行什么的都没有任何关系，全部都是中文也是这样大家有兴趣可以去demo页面自己感受下。
抓紧机会怕是過十几个版本这个问题就会被修复了。Firefox浏览器没有任何问题表现完全OK。
<zxx-circle>自定义元素的实现就是刚刚个把小时折腾了下想要完全精准计算最佳高度，有些超出自己的能力范围了只能大致处理下，欢迎有兴趣的人进行优化下当元素高度auto的时候，精准计算左右Shapes图形的高度
CSS Shapes布局 IE浏览器，Edge浏览器都不支持目前适合中后台项目，或者移动端产品（老手机不支持的项目）
非典型场景，但是万一哪个小伙伴遇到这样的需求，说不定就帮了大忙
以上，感谢阅读欢迎分享。
本文为原创文章欢迎分享，勿全文转载如果实在喜欢，可收藏詠不过期，且会及时更新知识点及修正错误阅读体验也更好。
