html - style - Sangría a partir de la segunda línea de un párrafo con CSS

sangría indent

Question

¿Cómo puedo sangrar desde 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;
}

Answer 1

¿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 el último, algo en la línea de este JSFiddle sería apropiado.

HTML

<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>
<br/><br/>
<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>

CSS

div {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

span {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

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

Answer 2

Esto funcionó para mí:

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

Answer 3

Haga el margen izquierdo: 2em empujará el texto completo, incluyendo la primera línea a la derecha, 2em. Luego agregue texto-sangría (aplicable a la primera línea) como -2em o menos ... Esto trae la primera línea de nuevo al comienzo sin margen. Lo intenté por etiquetas de lista

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

Answer 4

Necesitaba sangrar dos filas para permitir una primera palabra más grande en un para. Una solución engorrosa e irrepetible 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 de texto SVG e igual que el tamaño de fuente
• margin-top''s permite una mejor alineación del texto SVG y para texto
• Usé las dos primeras palabras aquí para recordar la atención necesaria para los descensores

Sí, es engorroso, pero también es independiente del ancho del div que lo contiene.

La respuesta anterior fue a mi propia consulta para permitir que la (s) primera (s) palabra (s) de un para sean más grandes y se coloquen en dos filas. Para aplicar sangría a las dos primeras líneas de un párrafo, puede reemplazar todas las etiquetas SVG con la siguiente img de píxel simple:

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

Answer 5

Si tu estilo como lista

puede "texto-alinear: inicial" y las líneas subsiguientes sangrarán todas. Me doy cuenta de que esto puede no adaptarse a sus necesidades, pero estaba revisando para ver si había otra solución antes de cambiar mi marcado.

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