📌  相关文章
📜  CSS text-indent属性

📅  最后修改于: 2020-11-05 01:06:46             🧑  作者: Mango

CSS text-indent属性

此CSS属性设置文本块中第一行的缩进。它指定放置在文本行之前的水平空间量。

它允许使用负值，如果定义了任何负值，则第一行的缩进将朝左。

句法

text-indent: length | inherit | initial;

该属性具有值长度，但是在这里，我们将讨论其实验值。

属性值

length：此值设置厘米，pt，em，px等单位的固定缩进量。其默认值为0。它允许为负值。当第一行的缩进为负时，它的缩进在左边。

percent：以包含块的宽度的百分比形式指定空间量。

initial：将属性设置为其默认值。

该CSS属性具有两个实验值，如下所述。浏览器不支持以下两个值。

hanging：这是非正式的和实验的价值。它使缩进的线反转。缩进除第一行外的每一行。通常，参考书目是用悬挂的缩进来写的，其中第一行在左边距处，其余内容缩进。

each-line：这也是一个实验值。它会影响每行，包括强制换行后的第一行(使用
)。

例

在此示例中，我们使用text-indent属性，其长度值分别为px，em和cm。我们还将文本对齐方式：属性以查看更好的结果。

 
 
     
         
            CSS text-indent Property 
         
         
     
      
     
    

        
Example of text-indent Property
 
          
        
text-indent: 70px;
 
        
 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        
 
          
        
text-indent: -5em;
 
        
 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        
 
        
text-indent: 7cm;
 
        
 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.

让我们看看使用百分比值的另一个演示。

例

 
 
     
         
            CSS text-indent Property 
         
           
     
      
     
    

        
Example of text-indent Property
 
          
        
text-indent: 65%;
 
        
 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.