Cómo crear un estilo de sangría francesa compatible con todos los navegadores en CSS en un lapso

Question

Lo único que he encontrado ha sido;

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

La única forma de que esto funcione es poner texto en un párrafo, lo que provoca esas líneas adicionales horriblemente antiestéticas.Preferiría tenerlos en un <span class="hang"></span> tipo de cosa.

También estoy buscando una manera de sangrar más que un solo nivel de colgado.Usar párrafos para apilar las sangrías no funciona.

Answer 1

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

Quizás quieras algo como display: run-in, donde la etiqueta se convertirá en bloque o en línea dependiendo del contexto...lamentablemente esto es aún no es universalmente compatible con los navegadores.

Answer 2

Encontré una forma genial de hacer precisamente eso, sin el desagradable lapso.

p {
  padding-left: 20px; 
} 

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

Bonito y sencillo :D

Si las nuevas líneas te molestan en los bloques p, puedes agregar

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

Ejemplo de JSFiddle

Answer 3

La respuesta de ysth es mejor con una excepción discutible;la unidad de medida debe corresponder al tamaño de la fuente.

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

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