css - 弧形文本缩进

Question

是否有更优雅的方式通过 CSS 实现此目的？这个想法是像弧形一样塑造文本。

谢谢!

#p1 {
  text-indent: 0;
}
#p2 {
  text-indent: 10px;
}
#p3 {
  text-indent: 20px;
}
#p4 {
  text-indent: 30px;
}
#p5 {
  text-indent: 40px;
}
#p6 {
  text-indent: 30px;
}
#p7 {
  text-indent: 20px;
}
#p8 {
  text-indent: 10px;
}
#p9 {
  text-indent: 0px;
}

<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>

Answer 1

如果您想要一个完美的弧形，您可以使用 shape-outside 来创建文本将跟随的圆或椭圆。

您可以看到这是如何工作的

然而支持是spotty至少可以说。

div{
    shape-outside: circle(50%);
    width: 140px;
    height: 140px;
    float: left;
 }
  

<div></div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</span>