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

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/

Très simple à l'aide de css:

p {
    text-indent:10px;
}

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

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é.

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.

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

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>

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

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */