📜  如何使用 CSS 设置段落的第二行缩进?

📅  最后修改于: 2021-08-31 07:33:46             🧑  作者: Mango

有多种方法可以实现段落第二行的缩进。下面用适当的代码和输出描述了实现此目的的一些方法。现在可以使用 CSS 以各种方式完成一些样式,根据需要缩进第二行。

注意:默认情况下,当换行时,它们从上一行开始的正下方开始。查看以下内容以了解其实际效果:

句法:

/* length values */
text-indent: 3mm;
text-indent: 40px;

/* percentage value
relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

<方法一:本例中,第一行文本不缩进,但第二行后面的行缩进,所以第一行不移动。在本例中,它是通过将 text-indent 设置为 -36px 并将 padding-left 值设置为 36px 来实现的。在这个例子中,开始的 div 标签包含以下样式信息作为属性。

例子:



  

    
        Set indent in second line of paragraph
    
  
    
  
    

  

    

GEEKS FOR GEEKS

       
        

            He started with             Geeks for Geeks as just a blog based site with             articles on programming questions, then later on expanded             to courses and now is a portal covering programming             questions, interview experiences and even a coding platform             taking inspiration from other competitive coding sites.         

    
  

输出:

方法二:通过使位置相对于第一行,将 text-indent 设置为 -26px,将 padding-left 值设置为 26px。在这个例子中,我们已经确定了第二条线相对于第一条线的位置。所以第二行根据第一行缩进/对齐。

例子:



  

    
        Set indent in second line of paragraph
    
  
    
      
    

  

    
        

            #             GeeksforGeeks :: A computer Science Portal For Geeks         

           

He started with             Geeks for Geeks as just a blog based site             with articles on programming questions, then later             on expanded to courses and now is a portal covering             programming questions, interview experiences and even             a coding platform taking inspiration from other             competitive coding sites.         

    
  

输出: