html5怎么开头空格？利用css实现首行缩进功能！

2021-06-21 14:03:51 浏览数 (67)

很多小伙伴在使用html做段落编写的时候，总是会觉得在阅读上有些不适。因为我们的书写习惯里面有一条是这样的：段落开头空两格。但是html代码默认是没有这样的规则的。这时候有些小伙伴可能会机智的用空格来实现这样的效果，但实际上css中提供了html首行缩进属性。

使用空格字符进行缩进

html空格怎么打?一文中有详细介绍了HTML空格的使用。我们可以使用四个空格来达到首行缩进的效果。

   <p>&nbsp;&nbsp;&nbsp;&nbsp;这是一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
    <p>这是另一端话一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>

使用这种方法有两点问题：第一，换行符不好打不好记；第二，换行的空格不好控制（一个中文字符在不同字体大小的情况下对应的空格数是不同的，上述代码使用了四个空格，只空了一个字符的位置（大约，并不准确））。

让空格不合并来使用空格缩进

html是可以直接使用空格来进行空格效果的实现的，只不过多个空格会被合并成一个空格，使用​white-space: pre;​可以让空格不进行合并。

    <p style="white-space: pre;">    这是一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
    <p>这是另一端话一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>

使用这种方法解决了上一种方法的不好记的问题，但空格长度的问题还是没有解决。

配合伪类的使用

不管是第一种方法还是第二种方法，都有一个问题：空格在html代码内，有时候会出现多了或者少了空格的情况，会让页面不美观，这时候可以在方法二的基础上进行拓展，使用 ​:before​伪元素在每个​p​元素前（小编这里使用​class​选择器进行选择，不然全部p元素都会出现这种效果而失去对照）插入空格以实现段落前缩进的效果。

<style>
     .indent:before{
         content:"    ";
         white-space: pre;
         }
</style>
    <p class="indent">这是一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
    <p>这是另一端话一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>

这种方法已经解决了大部分的问题，但最后还是留下了宽度的问题。

使用首行属性进行缩进

其实，css中提供了首行缩进的属性，只要将​text-indent​设置一个值，就能实现首行缩进的效果。最常用的值是以em为单位的值，​2em​表示二倍当前字体大小，以​16px​为例，​2em​就是​32px​，也就是两个字符的距离。

  <p style="text-indent: 2em;">这是一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
    <p>这是另一端话一段话很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>

使用这种方法能完美解决缩进问题，是缩进方案的最优解（不过一般将这种属性写在单独的css内以方便作为特殊样式调用而不是行间样式，小编这里是为了便展示）。

小结

以上就是html首行缩进两个字符怎么弄的全部内容。更多优质内容介绍敬请关注W3C技术头条。


HTML CSS

1 人点赞