Comment créer un style de retrait suspendu entièrement compatible avec les navigateurs en CSS en un instant

Question

La seule chose que j'ai trouvée est :

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

La seule façon pour que cela fonctionne est de mettre du texte dans un paragraphe, ce qui provoque ces lignes supplémentaires horriblement disgracieuses.Je préférerais de loin les avoir dans un <span class="hang"></span> genre de chose.

Je cherche également un moyen d'indenter davantage qu'un simple niveau de suspension.Utiliser des paragraphes pour empiler les retraits ne fonctionne pas.

Answer 1

<span> est un élément en ligne.Le terme retrait suspendu n'a aucun sens sauf si vous parlez d'un paragraphe (ce qui signifie généralement un élément de bloc).Vous pouvez bien entendu modifier les marges sur <p> ou <div> ou tout autre élément de bloc pour supprimer l'espace vertical supplémentaire entre les paragraphes.

Vous voudrez peut-être quelque chose comme display: run-in, où la balise deviendra soit block, soit inline selon le contexte...malheureusement, c'est pas encore universellement pris en charge par les navigateurs.

Answer 2

J'ai trouvé un moyen sympa de faire exactement cela, sans la durée désagréable.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

Agréable et simple :D

Si les nouvelles lignes vous dérangent dans les blocs p, vous pouvez ajouter

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

Exemple JSFiddle

Answer 3

La réponse de ysth est la meilleure à une exception discutable près ;l'unité de mesure doit correspondre à la taille de la police.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

"3" fonctionnerait également correctement ;"em" n'est pas recommandé car il est plus large que le caractère moyen d'un ensemble alphabétique."px" ne doit être utilisé que si vous avez l'intention d'aligner les blocs de texte avec des tailles de police différentes.