css3 字体自动换行第二行缩进一格

时间:2024-03-12 17:06:32

我们知道css中text-indent属性可以使每个段落首行开头文字缩进,如缩进2个文字距离样式。

p{
  text-indent: 2em; /*em是相对单位*/
}

注:em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上,就是首行缩进了2em

那如果我们想让第二行缩进一格呢:

p {
  text-indent: -2em;
  margin-left: 2em;
}
设置text-indent: -2em;以后p标签中第一行文字向左偏移,这样第二行开始的文字就等于缩进了,
但是这样设置会导致第一行向左超出div,所以再用margin-left使p标签整体右移即可,
不过也可以用 padding-left:2em ,这样IE8里也能显示。