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

Comment mettre en retrait à 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;
}

S'agit-il littéralement de la deuxième ligne que vous souhaitez indenter ou de la deuxième ligne (c'est-à-dire d'un retrait suspendu )?

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

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

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

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

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

Faire une marge gauche: environ 2em poussera tout le texte, y compris la première ligne, vers la droite 2em. Ensuite, ajoutez un retrait de texte (applicable à la première ligne) sous la forme -2em environ. 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>

Cela a fonctionné pour moi:

p { margin-left: -2em; 
 text-indent: 2em 
 }

J'avais besoin de mettre deux lignes en retrait pour permettre un premier mot plus grand dans un paragraphe. Une solution ponctuelle et fastidieuse consiste à placer du texte dans un élément SVG et à le positionner de la même manière qu'un <img>. L'utilisation de float et de la balise de hauteur du SVG définit combien de lignes 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 identique à la taille de la police
• margin-top permet un meilleur alignement du texte SVG et du texte para
• 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 question pour permettre au premier mot (s) 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 unique img suivant:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

Il existe un brouillon de travail CSS3 qui vous permettra (espérons-le bientôt) d'écrire simplement:

p { text-indent: 200px hanging; }

Gardez un œil sur: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Si vous coiffez comme liste