separar - tamaño de parrafo html
¿Sangrar solo la primera línea de texto en un párrafo? (8)
Además de la sangría de texto, puede usar el selector de :first-line si desea aplicar estilos adicionales.
p:first-line {
color:red;
}
p {
text-indent:40px;
}
Tengo varios párrafos que me gustaría sangrar, aunque solo las primeras líneas de estos párrafos.
¿Cómo apuntaría solo a las primeras líneas usando CSS o HTML?
Aqui tienes:
p:first-line {
text-indent:30px;
}
No vi una respuesta clara para un novato en CSS, así que aquí hay una fácil.
Me encontré con el mismo problema, solo tenía varias etiquetas <p> que tenía que trabajar. Usar la propiedad "text-indent" quería sangrar TODAS las etiquetas <p> y eso no es lo que quería.
Quería agregar una imagen de cita elegante 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. Dado que text-indent hacía que todos los párrafos subsiguientes se sangraran, no solo el primer párrafo, tuve que hacer una pequeña solución. Sin embargo, el mismo método se aplica si no estás buscando hacer una imagen.
Logré esto agregando primero un div vacío al principio del párrafo que quería sangrar. 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 fluyera en línea con el texto. Si está utilizando esto para una imagen, asegúrese de agregar un margen a la derecha o de que el ancho sea un poco más ancho para algunos espacios en blanco.
Aquí hay un ejemplo con el CSS en línea. Puede simplemente crear una clase y agregarla a su archivo CSS:
<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
Muy simple usando css:
p {
text-indent:10px;
}
Creará una sangría de 10 píxeles en cada párrafo.
Otros han mencionado la mejor manera de implementar esto a través de CSS, sin embargo, si necesita una solución rápida con el formato en línea, simplemente use el siguiente código:
<p style="text-indent: 40px">This text is indented.</p>
Primera sangría de todas las líneas (1), que supera la primera línea (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
También estaba teniendo problemas para hacer sangrar la primera línea de un párrafo (solo la primera) y estaba intentando el siguiente código:
p::first-line { text-indent: 30px; }
Esto no funcionó. Entonces, creé una clase en mi CSS y la usé en mi html de la siguiente manera:
en CSS:
.indent { text-indent: 30px; }
en html:
<p class="indent"> paragraph text </p>
Funcionó como por arte de magia. Todavía no sé por qué el primer ejemplo de código no funcionó y me aseguré de que el texto no estuviera alineado.