Aplicar sangría a partir de la segunda línea de un párrafo con CSS


103

¿Cómo puedo aplicar sangría a partir de la segunda línea de un párrafo?

He intentado

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

y

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

y

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

¿Por qué toda la sangría del texto de la primera línea está configurada en 0? Además, no sé cómo hacer esto, pero el que falta en esta lista es el que me tiene más sentido, el relleno.
Skarlinski

Respuestas:


211

¿Es literalmente solo la segunda línea que desea sangrar, o es de la segunda línea (es decir, una sangría francesa )?

Si es lo último, sería apropiado algo similar a este JSFiddle .

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

Este ejemplo muestra cómo el uso de la misma sintaxis CSS en un DIV o SPAN produce efectos diferentes.


3
@Reuben De acuerdo con su comentario que ahora ha sido eliminado, supongo que lo hizo en la cara de la segunda línea, y por el bien de los futuros visitantes, tal vez este violín sea mejor, donde la sintaxis es P, no div o span. jsfiddle.net/gg9Hx
redditor

1
¿Por qué el padding-left y luego la sangría de texto negativa? ¿Por qué debe funcionar así? Parece extraño. ¿Por qué no solo un positivo text-indent?
Don Cheadle

2
La sangría de texto no tiene ningún efecto en el intervalo. Se puede quitar del estilo del tramo para obtener el mismo resultado.
Sam Hasler

25

Hacer margen izquierdo: 2em más o menos empujará todo el texto, incluida la primera línea, 2em a la derecha. Luego, agregue sangría de texto (aplicable a la primera línea) como -2em más o menos. Esto hace que la primera línea vuelva a comenzar sin margen. Lo probé para las etiquetas de lista

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

24

Esto funcionó para mí:

p { margin-left: -2em; 
 text-indent: 2em 
 }

10
Esto parece hacer todo lo contrario de lo que pidió el OP. La versión de @techillage es correcta. Debes cambiar el signo menos
Alex Holsgrove

1
Esto es casi exactamente lo que necesitaba. La respuesta aceptada no funcionará para mí porque no tengo la libertad en mi CMS para agregar intervalos de esa manera. El único problema que tuve con la solución aquí es que el margen que queda sacará todo el párrafo fuera de un contenedor. Así que agregué 'posición: relativa' e 'izquierda: 2em' y es perfecto. Contrariamente al comentario de @AlexHolsgrove, la respuesta de techillage no funcionó para mí en absoluto, pero tal vez porque no estoy haciendo esto en un elemento de la lista.
Stu Furlong

2

Necesitaba sangrar dos filas para permitir una primera palabra más grande en un párrafo. Una solución única y engorrosa es colocar texto en un elemento SVG y colocarlo de la misma manera que un <img>. El uso de float y la etiqueta de altura de SVG define cuántas filas se sangrarán, por ejemplo

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  • La altura y el ancho de SVG determinan el área bloqueada.
  • Y = 36 es la profundidad de la línea de base del texto SVG y lo mismo que el tamaño de fuente
  • margin-top's permiten una mejor alineación del texto SVG y el para texto
  • Usé las dos primeras palabras aquí para recordar el cuidado necesario para los descendientes

Sí, es engorroso pero también es independiente del ancho del div contenedor.

La respuesta anterior fue a mi propia consulta para permitir que la (s) primera (s) palabra (s) de un párrafo sea más grande y se coloque en dos filas. Para simplemente sangrar las dos primeras líneas de un párrafo, puede reemplazar todas las etiquetas SVG con el siguiente img de un solo píxel:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />


1

Si el estilo de la lista

  • puede "alinear texto: inicial" y las líneas subsiguientes se sangrarán. Me doy cuenta de que es posible que esto no se adapte a sus necesidades, pero estaba comprobando si había otra solución antes de cambiar mi marcado.

    Supongo que poner la segunda línea también funcionaría, pero requiere pensamiento humano para que el contenido fluya correctamente y, por supuesto, saltos de línea rígidos (que no me molestan, per se).


  • 1
    bienvenido a Stackoverflow. Parece que tiene alguna solución a este problema de sangría. Sin embargo, sería de gran ayuda para todos si proporcionara un marcado y explicara la solución. Quizás pueda usar jsfiddle.net u otro servicio para crear una demostración funcional. Todo lo mejor.
    EGL 2-101
    Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
    Licensed under cc by-sa 3.0 with attribution required.