设置代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>缩进2字符</title>
<style type="text/css">
p{ text-indent:2em}
</style>
</head>
<body>
<p>首行缩进2字符的案例展示如下。需要多写几行看效果，需要多写几行看效果，需要多写几行看效果，需要多写几行看效果，需要多写几行看效果，需要多写几行看效果，需要多写几行看效果。</p>
</body>
</html>
text-indent: 2em
具体方法：
新建一个html代码文件，然后在这个html代码页面上创建一个<div>，同时给这个<div>设置一个class类；然后在这个<div>中创建几个<p>,并个<p>添加上内容。
代码：
<div class="cont">
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
<p>的顶顶顶顶顶的顶顶顶顶顶</p>
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
</div>
设置样式。在<title>标签后面新建一个<style>,在这个<style>设置cont类的宽为400px，然后设置p标签的首行缩进为两个字符。如图：
代码：
<style>
.cont{
width:400px
}
.cont p{
text-indent: 2em
}
</style>
使用浏览器打开，即可看到首行缩进的效果。如图：
所有代码。直接复制所有代码，粘贴到新建html文件上，保存后使用浏览器打开即可看到所有效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首行缩进</title>
<style>
.cont{
width:400px
}
.cont p{
text-indent: 2em
}
</style>
</head>
<body>
<div class="cont">
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
<p>的顶顶顶顶顶的顶顶顶顶顶</p>
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
</div>
</body>
</html>
扩展资料：
CSS text-indent属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。
所有浏览器都支持 text-indent 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
参考资料来源：百度百科：CSS text-indent
<style type="text/css">li{ width:100px border:1px solid #ccc padding-left:25px text-indent:-25px}
</style>
</head>
<body>
<ul>
<li>我恶魔呢放假额菲菲金额发</li>
<li>我恶魔呢放假额菲菲金额发</li>
</ul>
</body>
</html>
原理就是先在左边用padding空开，再用text-indext把第一行收回来
