css文字首行缩进的方法

在前端的web页面中文字块的首行缩进是一种非常有效的美观方式，它可以让访客在阅读文章时在视觉上更引人注目与易于阅读。下面73so博客就说一说在css中定义文字首行缩进的方法

css文字首页缩进的方法

方法1：

css中的text-indent属性可以定义文本块中首行文本的缩进。

例：

<style>
p{
    width: 200px;
}
.p1{
    text-indent:2em;
}
.p2{
    text-indent:30px;
}
.p3{
    text-indent:-30px;
}
</style>
<p class="p1">我是文字块中的内容我是文字块中的内容我是文字块中的内容我是文字块中的内容</p>
<p class="p2">我是文字块中的内容我是文字块中的内容我是文字块中的内容我是文字块中的内容</p>
<p class="p3">我是文字块中的内容我是文字块中的内容我是文字块中的内容我是文字块中的内容</p>

注意：

1、上面代码中的em也是表示的长度，1个em相当于一个汉字的宽度

2、text-indent的允许有负值，在负值下会缩进到左边

方法2：

CSS中除非了使用text-indent属性来设置缩进外，还可以使用::before伪类来设置首行的缩进。

例：

<style>
p{
    width: 200px;
}
.p1{
    text-indent:2em;
}
.p1::before{
    content: "";
    display: inline-block;
    width: 30px;
}
</style>
<p class="p1">我是文字块中的内容我是文字块中的内容我是文字块中的内容我是文字块中的内容</p>

以上就是css中设置文本块首行缩进的方法，大家可以参考一下。