html 首行缩进2字符

1. html 首行缩进 2 字符

1.1. 场景

  在 Html 开发中让一段文字（富文本等）首行缩进两个文字，可能在前面加上 8 个“”，因为过去对 CSS 不熟悉，这种方法实现虽然比较直接，但是文字多的时候会有很多“”充斥在代码中，代码会显得比较乱，现在我们实现这种效果就简单多了，直接在 CSS 样式代码中加入。可以使用 text-indent 属性来设置段落空两格，只需要给元素设置“text-indent:2em;”样式即可。text-indent 属性规定文本块中首行文本的缩进，该属性允许使用负值；如果使用负值，那么首行会被缩进到左边。

text-indent:2em;

  这样就很容易实现文本段落的缩进

1.2. 说明

 div style="text-indent:2em;" class="news-content" id="news_content">/div>;

1.2.1. text-indent:2em;

  text 的意思是文本，indent 在计算机英语中意思是缩进，至于后面的 2em 意思就是 2 个相对单位；

1.2.2. em

  em 这个单位的意思就是文字的高度，1em 就是 1 个文字的高度，2em 就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进 2 个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进 2 个文字的高度，就等于缩进两个文字的宽度，最后的效果就是缩进了两个文字。

1.2.3. 适用范围

  对于 ”text-indent:2em;” 属性，使用 CSS 的 text-indent 属性可以定义文本段落中的首行字体缩进的效果。使用该属性只对元素中的段落产生影响。对于使用，标签产生的换行效果，并不起作用。只能加在块状元素上面，内联元素是不起作用的。

1.3. 使用

  在 CSS 样式表中设置文本首行缩进的样式规则。代码如下：

div{
text-indent:2em;
font-size:29px;
width:900px;
}

  div 标签选择器使用 text-indent 属性将段落首行缩进 2em，这是两个汉字字符的宽度。使用 font-size 属性将字体大小设置为 29px，使用 width 属性将 div 元素的宽度设置为 900px，都是为了使效果能够更好地显示。

  在 HTML 网页中添加要使用标签选择器的 div 元素内容。代码如下：

html xmlns="http://www.w3.org/1999/xhtml">
head>
    meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    title>缩进 2 字符/title>
    style type="text/css">
        p {
            text-indent: 2em;
            font-size: 29px;
            width: 900px;
        }
    /style>
/head>
body>
p>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据！/p>
p>测试！/p>
/body>
/html>