Analyse du retrait de texte dans l'attribut de texte CSS

L'attribut de texte text-indent est utilisé pour définir l'indentation de la première ligne de texte. Tout élément peut avoir la première ligne indentée d'une longueur donnée, ainsi que la longueur. peut même être un nombre négatif. Mais cela ne fonctionne que pour les éléments rapides

p{text-align:2em;>

Cette règle met en retrait la première ! ligne de n'importe quel paragraphe par 2 Taille des caractères.

Généralement, text-indent peut être appliqué à n'importe quel élément de niveau bloc, mais pas aux éléments en ligne, ni aux éléments de remplacement, tels que , cependant, si il y a une image sur la première ligne d'un paragraphe, elle se déplacera avec le texte.

text-indent prend en charge l'indentation de texte négative, telle que

• p{text-indent:-2em };

La première ligne de tous les paragraphes ici sera avancée de 2 tailles de texte. Cependant, lorsque vous utilisez un retrait de texte négatif, veillez à ce que le texte soit à court de l'élément, vous risquez donc de ne pas obtenir l'effet souhaité.

Ce qui doit être noté ici, c'est l'utilisation du pourcentage. Le pourcentage fait référence à la valeur relative à l'élément parent. Si une valeur d'indentation de 5 % est définie, alors la première ligne de. cet élément sera basé sur son élément parent Indenté de 5% de la largeur. Tels que :

• p{width:400px;}

• p{text- indentation :5%;}

Il s'agit d'un paragraphe de texte testant l'utilisation du pourcentage d'indentation du texte

On voit que la première ligne de texte est indentée de 20px Le principe de calcul est que l'élément parent 400x5% = 20px Bien sûr, ça doit l'être. a noté que l'élément p n'a pas de largeur définie, mais la largeur est définie. Calculez-la en pourcentage de sa propre largeur.

Cependant, la chose la plus intéressante à propos de text-indent est probablement l'héritage, qui hérite des valeurs calculées plutôt que des valeurs déclarées. Tels que

• body{width:500px;}

• p{width:400px ; retrait de texte : 10 %;}

• p{width:200px;}

<span style="font-size: 14px;"><p><br/>这是外面的文字<br/><p>这是里面的文字</p><br/></p></span>

Ici, vous pouvez voir que la première ligne des deux paragraphes de texte est en retrait de 50 px, au lieu du texte extérieur de 50 px, et que le texte de l'élément p est en retrait de 40 px. hérite de la valeur calculée, pas de la valeur déclarée.

Recommandations associées :

Comment utiliser l'indentation de texte en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!