CSS技术分享: 文字在圆形内沿着弧线边界排版 _CSS

文章插图
一、圆形区域文字排版问题
如果容器是正方形，则文字排版很Easy，菜市场的老太太也能实现，因为天热排版就是OK的，例如：
p {padding: 10px;width: 12em;background: deepskyblue;color: #fff;}
实时效果如下：
如果你在其他地方看到zxx或者zhangxinxu文字的内容，说明是盗版的我的文章，欢迎反馈
但是，如果我们设置了巨大的圆角，则文字排版效果就有些惨不忍睹了，例如：
p {padding: 10px;width: 12em;background: deepskyblue;color: #fff;border-radius: 50%;}
实时效果如下：
如果你在其他地方看到zxx或者zhangxinxu文字的内容，说明是盗版的我的文章，欢迎反馈
可以看到部分文字直接都看不见了，上下左右留下的间隙也不一致，看起来好难受。
此时，水谷雫托着下巴，对着窗外感叹道：“要是文字可以沿着圆弧的边界排版就好了。”

文章插图
吉田春满脸泡泡茶壶地回道：“我有办法实现的呢~”

文章插图
二、CSS Shapes布局与环形排版
如果对CSS Shapes布局还不太了解，可以参阅我之前这篇热文：“写给自己看的CSS shapes布局教程” 。
其中，CSS Shapes布局可以围绕图片布局（根据Alpha通道透明度），这个图片包括渐变，于是乎，我们只需要绘制两个内凹的圆弧径向渐变，然后让文字环绕布局不就好了。
说干就干，首先，我们需要现在文字前面插入两个元素，一个左浮动，一个右浮动，然后绘制内凹的径向渐变。
HTML如下：
...文字内容

CSS代码如下：
.circle {border-radius: 50%;width: 207px; height: 250px;color: white;background-color: deepskyblue;padding: 10px;}before {float: left;width: 50%; height: 100%;shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red);}after {float: right;width: 50%; height: 100%;shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);}
结果如下图所示：

文章插图
您可以狠狠地点击这里：CSS Shapes布局让文字在圆环内排版demo
原理就是构建两个弧形，然后使用CSS Shapes布局让文字沿着这个弧形排列即可。
不要高兴地太早
然后上面的实现仍然有一些局限。
首先容器需要定高，不然左右浮动的元素高度不会存在，或者和元素设置具体的长度值才可以（这样不一定可以正好和形状匹配）。
其次需要在文字前面插入和这两个元素实在是太不方便了，每次都插入两个元素，又啰嗦又不好维护。怎么办，有没有什么优化的方法呢？
试试看使用自定义元素。
三、使用自定义元素优化环形排版
自定义一个名为的元素，使用Shadow DOM把和元素藏在自定义元素里面，这样，HTML代码就会很干净了，如下：

在CSS ... by zhangxinxu

就会有如下图所示的效果了：

文章插图
同时，如果元素不设置高度，也能有效果，但是，最终的高度不一定精准，我是粗略实现了下，因此，实际开发，如果可以，建议开始设定好高度，体验更好。
JS代码如下：
class HTMLZxxCircleElement extends HTMLElement {constructor() {self = super();let shadow = this.attachShadow({mode: 'open'});// 文本内容移动到shadow dom元素中let style = document.createElement('style');shadow.appendChild(style);// 前后元素let before = document.createElement('zxx-before');let after = document.createElement('zxx-after');shadow.prepend(after);shadow.prepend(before);// 内容let content = document.createElement('div');shadow.appendChild(content);let ro = new ResizeObserver( entries => {for (let entry of entries) {self._updateRendering();}});// 观察当前元素尺寸变化ro.observe(this);}connectedCallback() {// 执行渲染更新this._updateRendering();}_updateRendering() {let shadow = this.shadowRoot;let content = shadow.querySelector('div');let before = shadow.querySelector('zxx-before');before.style.height = 'auto';// 内容更新content.innerHTML = this.innerHTML;// 此时内容高度let heightContent = parseFloat(getComputedStyle(content).height);let heightBefore = parseFloat(getComputedStyle(before).height);if (heightContent == 0) {return;}// 没有设置具体的高度值if (heightBefore == 0 && heightContent != 0) {// 同样面积的椭圆的高度是？// s = π×a×blet height = (2 *heightContent * 2 / Math.PI) + 'px';console.warn('