Retrait à partir de la deuxième ligne d'un paragraphe avec CSS

Comment puis-je indenter à partir de la deuxième ligne d'un paragraphe?

J'ai essayé

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

Et

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

Et 

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}
73
demandé sur Stephen Leppik 2013-06-18 03:03:16

5 réponses

Est-ce littéralement juste la deuxième ligne que vous voulez indenter, ou est-ce de la deuxième ligne (ie. un retrait négatif de première ligne)?

Si c'est ce dernier, quelque chose du genre de ceci JSFiddle serait approprié.

HTML

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
<br/><br/>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

CSS

div {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

span {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

Cet exemple montre comment l'utilisation de la même syntaxe CSS dans un DIV ou un SPAN produit des effets différents.

149
répondu redditor 2013-06-17 23:14:52

Cela a fonctionné pour moi: 

p { margin-left: -2em; 
 text-indent: 2em 
 }
20
répondu xoandre 2014-01-24 21:29:45

Make left-margin: 2em ou plus va pousser le texte entier, y compris la première ligne à droite 2em. Que d'ajouter text-indent (applicable à la première ligne) comme-2em ou plus.. Cela ramène la première ligne au début sans marge. Je l'ai essayé pour les balises de liste 

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>
18
répondu vineetma 2014-01-28 10:20:47

Si vous stylisez comme liste

  • Vous pouvez "text-align: initial" et les lignes suivantes seront toutes indentées. Je me rends compte que cela peut ne pas répondre à vos besoins, mais je vérifiais s'il y avait une autre solution avant de changer mon balisage..

    Je suppose que mettre la deuxième ligne fonctionnerait aussi, mais nécessite une pensée humaine pour que le contenu circule correctement, et, bien sûr, des sauts de ligne durs (ce qui ne me dérange pas, en soi).

    • 1
    répondu morrie 2015-02-02 23:02:14

    J'avais besoin de mettre en retrait deux lignes pour permettre un premier mot plus grand dans un para. Une solution unique lourde consiste à placer du texte dans un élément SVG et à le positionner de la même manière qu'un . L'utilisation de float et de la balise height du SVG définit le nombre de lignes qui seront indentées, par exemple 

    <p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    • la hauteur et la largeur de SVG déterminent la zone bloquée.
    • Y = 36 est la profondeur de la ligne de base du texte SVG et la même que font-size
    • les margin-top permettent un meilleur alignement du texte SVG et du para texte
    • utilisé les deux premiers mots ici pour rappeler les soins nécessaires pour les descendeurs

    Oui c'est encombrant mais c'est aussi indépendant de la largeur du div contenant.

    La réponse ci-dessus était à ma propre requête pour permettre au premier mot d'un para d'être plus grand et positionné sur deux lignes. Pour simplement indenter les deux premières lignes d'un para, vous pouvez remplacer toutes les balises SVG par le pixel img suivant: 

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />
    1
    répondu Tony 2016-06-23 14:31:32