Sangría texto después de la primera línea en un párrafo

Question

- Un periodista de Reuters en el distrito Surkhrod en la provincia de Nangarhar, donde los aldeanos dijeron que ocurrieron las redadas, dijo que la policía afgana disparó contra la multitud después de que algunos comenzaron a tirar piedras al gobierno local edificios.

En el párrafo anterior, me gustaría usar CSS para hacer que todas las líneas después de la primera línea sangren automáticamente un espacio para que cada línea permanezca justo después de - en la primera línea.

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> 

Es similar a un elemento de lista con la posición de la lista establecida en el exterior, pero no quiero utilizar una lista.

¿Cuál es la manera más simple en que se puede pensar para lograr este efecto? Menos marcas de HTML adicionales serán mejores.

Muchas gracias a todos ustedes.

Answer 1

Necesita text-indent. Normalmente text-indent empuja la primera línea hacia adentro, pero si le da una cifra negativa y utiliza un margen positivo, puede lograr el efecto que busca.

text-indent: -10px; 
margin-left: 10px 

Answer 2

p { 
    text-indent: -1em; 
    padding-left: 1em; 
} 

Answer 3

En los elementos en línea tal vez funciona de manera diferente, me he dado cuenta. Necesitaba un "outdent" (primera línea más a la izquierda que el resto del párrafo) y noté que las sugerencias anteriores hacían lo contrario: creaba una sangría regular (donde la primera línea está más DERECHA que otras líneas). Esto es lo que funciona para un elemento en línea, por ejemplo, una "a" tag:

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

También establecer el elemento en bloque que contiene a tener un margen de 1 em, por lo que, cuando la línea "a" elementos comienzan, con sus márgenes negativos, en realidad se colocan exactamente donde yo habría estado originalmente antes de perder el tiempo para hacer un "outdent".

Espero que esto ayude a alguien! También me di cuenta que no hay control de tamaño en el propio texto-guión en mi elemento en línea, ya sea ....

JSFiddle Example

Answer 4

No utilizable en este momento, pero si se activa la Experimental Web platform Flag en el cromo que puedo utilizar text-indent:1em each-line; que debería haz exactamente lo que quieras

text-indent on MDN