Indenter seule la première ligne de texte dans un paragraphe?

Question

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

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

Answer 1

Utilisez la propriété text-indent .

p { 
   text-indent: 30px;
}

jsFiddle .

Answer 2

En plus du texte-tiret, vous pouvez utiliser le sélecteur de :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 css:

p {
    text-indent:10px;
}

va créer un retrait de 10 pixels dans chaque paragraphe.

Answer 4

J'avais aussi un problème pour obtenir la première ligne d'un paragraphe (seule la première ligne) à tiret et tentais le code suivant:

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

Cela ne fonctionne pas. Donc, je créé une classe dans mon CSS et utilisé 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 ne fonctionne pas et je l'ai fait faire en sorte que le texte n'a pas été aligné.

Answer 5

vous allez ici:

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

n'a pas vu une réponse claire pour un débutant CSS, voici donc facile.

Answer 6

D'autres ont mentionné la meilleure façon de mettre en œuvre cette via CSS, si vous avez besoin d'une solution rapide avec le 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

Answer 7

Je suis tombé sur la même question que j'avais plusieurs balises <p> je devais travailler avec. En utilisant la propriété « text-indent » voulait tiret toutes les balises de <p> et ce n'est pas ce que je voulais.

Je voulais ajouter une image de citation de fantaisie à une liste de témoignages, avec l'image d'arrière-plan sur la base css au début de chaque citation et le texte assis à droite de l'image. Depuis text-indent a été à l'origine de tous les paragraphes suivants à tiret, non seulement le premier paragraphe, je devais faire un peu d'une solution de contournement. La même méthode est applicable si vous ne cherchez pas à faire une image bien.

J'accompli cela en ajoutant d'abord une div vide au début du paragraphe que je voulais dentelées. Ensuite, j'appliqué une petite largeur et la hauteur pour créer la boîte invisible et finalement appliqué un flotteur gauche pour faire couler en ligne avec le texte. Si vous utilisez ce pour une image, assurez-vous d'ajouter une marge à droite ou à rendre votre une largeur peu plus large pour un espace blanc.

Voici un exemple avec la ligne CSS. Vous pouvez facilement créer simplement 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>

Answer 8

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

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