¿Sangrar solo la primera línea de texto de un párrafo?

Question

Tengo varios párrafos que me gustaría marcar, aunque solo las primeras líneas de estos párrafos.

¿Cómo podría orientar solo las primeras líneas utilizando CSS o HTML?

Answer 1

Utilice la propiedad text-indent.

p { 
    text-indent: 30px; 
} 

jsFiddle.

Answer 2

muy simple usando CSS:

p { 
    text-indent:10px; 
} 

creará una hendidura de 10 píxeles en cada párrafo.

Answer 3

Además del texto en sangría, puede usar el selector :first-line si desea aplicar estilos adicionales.

p:first-line { 
    color:red; 
} 

p { 
    text-indent:40px; 
} 

http://jsfiddle.net/Madmartigan/d4aCA/1/

Answer 4

Aquí van:

p:first-line { 
    text-indent:30px; 
} 

no vi una respuesta clara para un novato CSS, así que aquí es una tarea fácil.

Answer 5

Me encontré con el mismo problema solo tuve varias etiquetas <p> con las que tuve que trabajar. El uso de la propiedad "texto-sangría" quería sangrar TODAS las etiquetas <p> y eso no es lo que quería.

Quería añadir una imagen de presupuesto a una lista de testimonios, con la imagen basada en el fondo CSS al comienzo de cada cita y el texto a la derecha de la imagen. Como el text-indent estaba causando que todos los párrafos posteriores se sangraran, no solo el primer párrafo, tuve que hacer una pequeña solución. El mismo método aplica si no estás buscando hacer una imagen.

Logré esto agregando primero un div vacío al comienzo del párrafo que quería sangrado. A continuación, le apliqué un ancho y una altura pequeños para crear el cuadro invisible y finalmente apliqué un flotador izquierdo para hacer que fluya en línea con el texto. Si está utilizando esto para una imagen, asegúrese de agregar un margen a la derecha o amplíe un poco su ancho para un espacio en blanco.

Aquí hay un ejemplo con CSS en línea. Usted puede simplemente crear una clase y agregarlo a su archivo CSS:

<div style="height: 25px; width: 25px; float: left;"></div> 
<p>First Paragraph</p> 
<p>Second Paragraph</p> 

Answer 6

primer guión todas las líneas (1), de anular la sangría de la primera línea (2)

padding-left: 0.4em /* (1) */ 
text-indent: -0.4em /* (2) */ 

Answer 7

también estaba teniendo una problemas para conseguir la primera línea de un párrafo (sólo la primera línea) para sangrar y estaba tratando el siguiente código:

p::first-line { text-indent: 30px; } 

Esto no funcionó.Por lo tanto, he creado una clase en mi CSS y la utilicé en mi html de la siguiente manera:

en CSS:

.indent { text-indent: 30px; } 

en html:

<p class="indent"> paragraph text </p> 

Esto funcionó como un encanto. Todavía no sé por qué el primer ejemplo de código no funcionó y me aseguré de que el texto no estuviera alineado.