web-dev-qa-db-fra.com

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

Comment puis-je 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;
}
htmlcsstextpseudo-classindentation
84
Reuben

Est-ce que c'est littéralement juste la deuxième ligne que vous voulez mettre en retrait, ou est-ce que de la deuxième ligne (c'est-à-dire un retrait suspendu )?

Si c'est le dernier cas, quelque chose dans le sens 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.

174
redditor

Cela a fonctionné pour moi:

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

Faire marge gauche: 2em ou plus va pousser tout le texte, y compris la première ligne à droite 2em. Puis ajoutez text-indent (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>
21
vineetma

Je devais indenter deux lignes pour permettre un premier mot plus grand dans un para. Une solution ponctuelle fastidieuse consiste à placer du texte dans un élément SVG et à le positionner comme un <img>. L'utilisation de float et de la balise height du SVG définit le nombre de lignes à mettre en retrait, 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 à font-size
  • 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 aux descendeurs

Oui, c'est fastidieux mais il est également indépendant de la largeur du div contenant.

La réponse ci-dessus était à ma propre requête pour permettre au (x) premier (s) mot (s) d'un para d'être plus gros et placé sur deux lignes. Pour indenter simplement 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;" />
1
Tony

Si vous style comme liste

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

    J'imagine que l'insertion de la deuxième ligne fonctionnerait également, mais nécessite une réflexion humaine pour que le contenu puisse circuler correctement et, bien sûr, des sauts de ligne durs (qui ne me dérangent pas en soi).

    • 1
    morrie