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

¿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;
}

¿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.

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>

Esto funcionó para mí:

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

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;" />

Hay un borrador de trabajo de CSS3 que (con suerte pronto) le permitirá escribir solo:

p { text-indent: 200px hanging; }

Esté atento a: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Si el estilo de la lista