弧形文字缩进

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>

​

Answer 3

正如戴尔所说，使用shape-作为一个纯css解决方案。然而，由于浏览器的支持，我们必须找到一个较低级别的解决方案。

包含非jQuery解决方案的注释，代码包含jQuery。

​

var ps = 9;//paragraphs
var i = 1;//start id
var x = 0;//left position
var amount = 50;
for(i=1;i<ps;i++){
 //calculate left position in arc
  //(i/ps) gets value between 0 and 1, Math.PI is to make it radians for sine, *amount is max indent
  //bearing in mind this bit can be changed to give more desired effect.
  x = Math.sin(((i-1)/(ps-1))*Math.PI)*amount;
  
  //get element using jquery and set its text-indent to x
  //otherwise you could use document.getElementById('p'+i); and textIndent JS property if you dont want jQuery.
  $('#p'+i).css('text-indent', x+'px');
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

​