圆弧形状的文本缩进

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用来创建一个文本将遵循的圆形或椭圆形.

你可以看到它是如何工作的

然而至少可以说支持是不稳定的.

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>

Answer 2

您可以使用该类的一个类和一个规则获得相同的结果.诀窍是重复彼此内部的元素:

.blubb {
  margin: 5px 0 5px 10px;
}

<div class="blubb">
  Lorem ipsum dolor sit amet
  <div class="blubb">
    Lorem ipsum dolor sit amet
      <div class="blubb">
        Lorem ipsum dolor sit amet
          <div class="blubb">
            Lorem ipsum dolor sit amet
            <div class="blubb">Lorem ipsum dolor sit amet</div>
          </div>
          <div class="blubb">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="blubb">Lorem ipsum dolor sit amet</div>
  </div>
  <div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>