Cómo crear un estilo de sangría colgante compatible con navegador en CSS en un lapso

Question

Lo único que he encontrado ha sido;

.hang { 
    text-indent: -3em; 
    margin-left: 3em; 
} 

La única manera para que esto funcione es poner texto de un párrafo, lo que hace que esas líneas horriblemente fea adicionales. Prefiero simplemente tenerlos en un tipo de cosa <span class="hang"></span>.

También estoy buscando una forma de sangrar más allá de un solo nivel de suspensión. Usar párrafos para apilar las indenciones no funciona.

Answer 1

<span> es un elemento en línea. El término sangría francesa no tiene sentido a menos que esté hablando de un párrafo (que generalmente significa un elemento de bloque). Por supuesto, puede cambiar los márgenes en <p> o <div> o cualquier otro elemento de bloque para eliminar el espacio vertical adicional entre párrafos.

Es posible que desee algo como display: run-in, donde la etiqueta se convertirá en bloque o en línea según el contexto ... lamentablemente, esto es not yet universally supported by browsers.

Answer 2

Encontré una buena manera de hacer eso, menos el lapso desagradable.

p { 
    padding-left: 20px; 
} 

p:first-letter { 
    margin-left: -20px; 
} 

sencillo y agradable: D

Si los saltos de línea están molestando en p bloques, se puede añadir respuesta

p { 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 

JSFiddle Example

Answer 3

de ysth es mejor con una excepción discutible; la unidad de medida debe corresponderse con el tamaño de la fuente.

p { 
    text-indent: -2en; 
    padding-left: 2en; 
} 

"3" también funcionaría adecuadamente; "em" no se recomienda ya que es más ancho que el carácter promedio en un conjunto alfabético. "px" solo debe usarse si pretendía alinear bloqueos de bloques de texto con diferentes tamaños de fuente.