gpt4 book ai didi

css - 弧形文本缩进

转载 作者:技术小花猫 更新时间:2023-10-29 10:39:45 25 4
gpt4 key购买 nike

是否有更优雅的方式通过 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>

最佳答案

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

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

然而支持是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>

关于css - 弧形文本缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46981592/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com