Mettre en retrait uniquement la première ligne de texte d'un paragraphe ?

Question

J'ai plusieurs paragraphes que je voudrais mettre en retrait, mais seulement les premières lignes de ces paragraphes.

Comment pourrais-je cibler uniquement les premières lignes à l'aide de CSS ou de HTML ?

Answer 1

Utilisez le text-indent propriété.

p { 
   text-indent: 30px;
}

jsFiddle .

Answer 2

En plus de l'indentation du texte, vous pouvez utiliser la fonction :first-line si vous souhaitez appliquer des styles supplémentaires.

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

Answer 3

Très simple en utilisant le css :

p {
    text-indent:10px;
}

Crée une indentation de 10 pixels dans chaque paragraphe.

Answer 4

J'avais également un problème pour mettre en retrait 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é. J'ai donc créé une classe dans ma CSS et l'ai utilisée dans mon html comme suit :

en CSS :

.indent { text-indent: 30px; }

en html :

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

Cela a marché comme sur des roulettes. 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é.

Answer 5

Voilà :

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

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