Question

有没有更优雅的方式通过CSS实现这一目标？我们的想法是像Arc一样对文本进行整形。

谢谢！

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果你想要一个完美的弧线，你可以使用//get GFR PostOp function getGrade() { var kG = parseFloat($("#input0").val()); var preCalc = parseFloat($("#input1").val()); var Calc = kG * preCalc; var CalcReady = Calc.toFixed(2); if (isNaN(CalcReady)) CalcReady = 0; $('#res1').val((CalcReady)); } $(document).ready(function() { $('#input1').keyup(function(event) { getGrade(); }); }); //get Grade Group function getGroup() { var gradeGroup = parseFloat($("#res1").val()); if (gradeGroup >= 90) { var Group = 1; } else if (gradeGroup < 90 && gradeGroup >= 60) { var Group = 2; } else if (gradeGroup < 60 && gradeGroup >= 45) { var Group = 3 A; } else if (gradeGroup < 45 && gradeGroup >= 30) { var Group = 3 B; } else if (gradeGroup < 30 && gradeGroup >= 15) { var Group = 4; } else { var Group = 5; }; } if (isNaN(Group)) Group = 0; $('#res2').val((Group)); $(document).ready(function) { $('#input1').keyup(function(event) { getGroup(); }); });来创建一个文本将遵循的圆或椭圆。

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

但至少可以说spotty支持。

＆＃13;

shape-outside

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

正如戴尔所说，使用外形为纯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>

Answer 4

您可以尝试使用偏斜变换。您将p置于div内，将div倾斜，然后以相反的方式倾斜p。在div上使用倾斜将导致此形状：

正如您可能注意到的那样，文本表现不佳，因此您必须在另一个方向上进行p的偏斜。

然后通过反转值对第二部分执行相同的操作。

.first {
  transform: skew(30deg);
  transform-origin: top right;
}

.first p {
  transform: skew(-30deg);
}
.second {
  transform: skew(-30deg);
  transform-origin: bottom right;
}

.second p {
  transform: skew(30deg);
}

<div class="first">
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="second">
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
</div>

圆弧形状的文本缩进

4 个答案: