html - online - text-indent css ejemplo
Sangría de texto después de la primera línea en un párrafo (4)
En 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 etiqueta "a":
#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }
También configuré el elemento de nivel de bloque que contiene un margen de 1em, de modo que cuando comienzan los elementos en línea "a", con sus márgenes negativos, realmente se colocan exactamente donde las cosas habrían estado originalmente antes de perder el tiempo para hacer un " outdent ".
¡Espero que esto ayude a alguien! También noté que no hay control de tamaño en el texto-sangría en sí mismo en mi elemento en línea, ya sea ....
- Un periodista de Reuters en el distrito de 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 de ellos comenzaron a tirar piedras a los edificios del gobierno local.
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 la lista con la posición de la lista establecida en el exterior, pero no quiero usar una lista.
¿Cuál es la forma más simple en que se puede pensar para lograr este efecto? Menos marcas de HTML adicionales serán mejores.
Muchas gracias a todos.
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
No se puede utilizar en este momento, pero si activa la bandera de la plataforma web experimental en Chrome, puede usar el text-indent:1em each-line; que debería hacer exactamente lo que quieres.
p {
text-indent: -1em;
padding-left: 1em;
}