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

sangria francesa en bibliografia

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 extra horriblemente antiestéticas. Preferiría tenerlos en un tipo de cosa <span class="hang"></span> .

También estoy buscando una forma de seguir sangría que solo un nivel único de ahorcamiento. Usar párrafos para apilar las indenciones no funciona.

Answer 1

<span> es un elemento en línea. El término " sangría" no tiene sentido a menos que estés hablando de un párrafo (que generalmente significa un elemento de bloqueo). 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 dependiendo del contexto ... lamentablemente, esto aún no es universalmente compatible con los navegadores .

Answer 2

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

p {
  padding-left: 20px; 
} 

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

Agradable y simple: D

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

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

Ejemplo JSFiddle

Answer 3

La respuesta de ysth es la 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.