N'indenter que la première ligne d'un paragraphe?

j'ai plusieurs paragraphes que je voudrais indenter, bien que seulement les premières lignes de ces paragraphes.

Comment puis-je cibler seulement les premières lignes en utilisant CSS ou HTML?

44
demandé sur alex 2011-05-02 16:10:13

8 réponses

text-indent propriété.

p { 
   text-indent: 30px;
}

jsFiddle.

141
répondu alex 2011-05-02 12:11:52

en plus de text-indent, vous pouvez utiliser le :first-line sélecteur si vous souhaitez appliquer des styles supplémentaires.

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

http://jsfiddle.net/Madmartigan/d4aCA/1/

25
répondu Wesley Murch 2011-05-02 12:14:43

Très simple à l'aide de css:

p {
    text-indent:10px;
}

va créer une indentation de 10 pixels dans chaque paragraphe.

10
répondu Shay Ben Moshe 2011-05-02 12:13:19

j'avais aussi un problème à faire indenter la première ligne d'un paragraphe (seulement la première ligne) et j'essayais le code suivant:

p::first-line { text-indent: 30px; }

cela n'a pas fonctionné. Ainsi, j'ai créé une classe dans mon CSS et l'ai utilisée dans mon html comme suit:

dans le CSS:

.indent { text-indent: 30px; }

EN html:

<p class="indent"> paragraph text </p>

Cela a fonctionné comme un charme. Je ne sais toujours pas pourquoi le premier exemple de code n'a pas fonctionné et je me suis assuré que le texte n'était pas aligné.

4
répondu Wayne 2014-05-23 20:48:05

Ici, vous allez:

p:first-line {
    text-indent:30px;
}

Je N'ai pas vu de réponse claire pour un débutant CSS, donc en voici une facile.

1
répondu PaulBGD 2013-11-26 20:20:53

D'autres ont mentionné la meilleure façon d'implémenter ceci via CSS, cependant si vous avez besoin d'une correction rapide avec le formatage inline, utilisez simplement le code suivant:

<p style="text-indent: 40px">This text is indented.</p>

Source:https://www.computerhope.com/issues/ch001034.htm

-1
répondu Ibrahim Conway 2018-04-11 07:41:39

j'ai rencontré le même problème que j'ai eu plusieurs <p> les balises, j'ai eu à travailler avec. En utilisant la propriété" text-indent " vous vouliez indenter tous les <p> balises et ce n'est pas ce que je voulais.

j'ai voulu ajouter une image de citation fantaisiste à une liste de témoignages, avec l'image de fond CSS basée au début de chaque citation et le texte assis à la droite de l'image. Depuis text-indent est à l'origine de tous les paragraphes suivants à l'indentation, pas seulement le tout premier paragraphe, Je a faire un peu d'une solution de contournement. La même méthode s'applique si vous ne cherchez pas à faire une image.

pour ce faire, j'ai d'abord ajouté un div vide au début du paragraphe que je voulais en retrait. Ensuite, j'ai appliqué une petite largeur et hauteur à elle pour créer la boîte invisible et finalement appliqué un flotteur gauche pour la faire couler en ligne avec le texte. Si vous utilisez ceci pour une image, assurez-vous d'ajouter une marge à droite ou de rendre votre Largeur un peu plus large pour certains blancs espace.

voici un exemple avec le CSS inline. Vous pouvez facilement créer une classe et l'ajouter à votre fichier CSS:

<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
-3
répondu Phil 2013-02-01 06:12:18

premier tiret toutes les lignes( 1), que sur la première ligne (2)

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
-3
répondu Aromapark Media 2013-10-10 11:51:12