css实现文本在圆形容器中展示

前端文本展示大多数都是在盒子模型中添加文本，而普通的盒子都是方形的。有些场景需要在圆形容器中展示，例如：

实现方式如下：

1、html代码

<div class="circle-box">
  <span class="content-before"></span>
  <span class="content-after"></span>
  <p>
    <!-- 可能第一个字独立占一行，使用换行符 -->
    <br />
    我是圆形容器里面的内容。我是圆形容器里面的内容。我是圆形容器里面的内容。我是圆形容器里面的内容。我是圆形容器里面的内容。我是圆形容器里面的内容。我是圆形容器里面的内容。我是圆形容器里面的内容。
  </p>
</div>

2、less/scss代码

.circle-box{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: deepskyblue;
  padding: 10px;
  .content-before{
    float: left;
    width: 50%;
    height: 100%;
    shape-outside: radial-gradient(farthest-side ellipse at right, transparent 98%, red);
  }
  .content-after{
    float: right;
    width: 50%;
    height: 100%;
    shape-outside: radial-gradient(farthest-side ellipse at left, transparent 98%, red);
  }
}

3、注意

1）shape-outside不兼容IE浏览器，使用时需测试各浏览器的兼容问题

2）shape-outside倒数第二个参数实际应为100%，但是移动端设备100%右侧中间会出现换行，故写了98%，如显示有问题，可适当调整该值

如不想自己写，可引用npm包 https://www.npmjs.com/package/circular-container