web-dev-qa-db-fra.com

Retrait du texte après la première ligne d'un paragraphe

- Un journaliste de Reuters dans le district de Surkhrod dans la province de Nangarhar, où les villageois ont déclaré que les raids avaient eu lieu, a déclaré que la police afghane avait tiré sur la foule après que certains d'entre eux aient commencé à lancer des pierres sur les bâtiments du gouvernement local.

Dans le paragraphe ci-dessus, je voudrais utiliser CSS pour que toutes les lignes après la première ligne mettent automatiquement en retrait de l'espace afin que chaque ligne reste juste après le - dans la première ligne.

HTML 

<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where 
villagers said the raids took place, said Afghan police fired at the crowd 
after some of them started throwing stones at local government buildings.</p>

Il est similaire à un élément de liste avec une position de liste définie sur l'extérieur, mais je ne veux pas utiliser de liste.

Quelle est la manière la plus simple à laquelle vous pouvez penser pour obtenir cet effet? Moins de balises html supplémentaires seront meilleures.

Un grand merci à vous tous.

htmlcssindentationtext-indent
45
bobo

Vous avez besoin text-indent . Normalement text-indent pousse la première ligne vers l'intérieur, mais si vous lui donnez un chiffre négatif et utilisez une marge positive, vous pouvez obtenir l'effet que vous recherchez.

text-indent: -10px;
margin-left: 10px
74
Mathew
p {
  text-indent: -1em;
  padding-left: 1em;
}
41
kennytm

Non utilisable pour le moment mais si vous activez le Drapeau de la plateforme Web expérimentale on chrome vous pouvez utiliser text-indent:1em each-line; qui devrait faire exactement ce que vous voulez.

retrait de texte sur MDN

2
sylvain

Sur les éléments en ligne, cela fonctionne peut-être différemment, j'ai remarqué. J'avais besoin d'une "sortie" (première ligne plus à gauche que le reste du paragraphe) et j'ai remarqué que les suggestions ci-dessus faisaient le contraire - créé un retrait régulier (où la première ligne est plus à DROITE que les autres lignes). Voici ce qui fonctionne pour un élément en ligne, par exemple, une balise "a":

#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }

J'ai également défini l'élément au niveau du bloc contenant pour avoir une marge de 1em, de sorte que là où les éléments "a" en ligne commencent, avec leurs marges négatives, ils se positionnent exactement là où j'aurais été avant de déconner pour créer un " dépassé ".

J'espère que cela aide quelqu'un! J'ai également remarqué qu'il n'y a pas de contrôle de taille sur le retrait de texte lui-même sur mon élément en ligne, non plus ....

Exemple JSFiddle

1
code-sushi

S'appuyant sur la réponse de @ kennytm; si vous souhaitez aligner du texte à espacement fixe, utilisez ch unités au lieu de em unités. Par exemple:

<div class="query-select">SELECT Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10</div>

avec ch-padding/indentations négatives

.query-select {
  padding-left: 8ch;
  text-indent: -7ch;
}

Rendra (basé sur la largeur de la page) comme:

  SELECT Field1, Field2, Field3, Field4, Field5, Field6, 
         Field7, Field8, Field9, Field10
0
Jason Clark