web-dev-qa-db-fra.com

Indenter uniquement la première ligne de texte d'un paragraphe?

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

Comment cibler uniquement les premières lignes en utilisant CSS ou HTML?

htmlcssindentationtargettext-indent
52
Miles Henrichs

Utilisez le text-indent propriété.

p { 
   text-indent: 30px;
}

jsFiddle .

157
alex

En plus du retrait de texte, 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/

30
Wesley Murch

Très simple avec css:

p {
    text-indent:10px;
}

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

12
Shay Ben Moshe

J'avais également un problème pour obtenir la première ligne d'un paragraphe (uniquement la première ligne) à indenter et j'essayais le code suivant:

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

Cela n'a pas fonctionné. J'ai donc créé une classe dans mon 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 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
Wayne

Voici:

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

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

1
PaulBGD

D'autres ont mentionné la meilleure façon de l'implémenter via CSS, mais si vous avez besoin d'une solution rapide avec un formatage en ligne, utilisez simplement le code suivant:

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

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

0
Ibrahim Conway