Como criar um estilo de recuo deslocado totalmente compatível com o navegador em CSS em um intervalo

Question

A única coisa que encontrei foi;

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

A única maneira de isso funcionar é colocar texto em um parágrafo, o que causa aquelas linhas extras horrivelmente feias.Eu prefiro apenas tê-los em um <span class="hang"></span> tipo de coisa.

Também estou procurando uma maneira de recuar ainda mais do que apenas um único nível de deslocamento.Usar parágrafos para empilhar os recuos não funciona.

Answer 1

<span> é um elemento inline. O termo pendurado travessão é sem sentido a menos que você está falando de um parágrafo (o que geralmente significa um elemento de bloco). Você pode, é claro, alterar as margens no <p> ou <div> ou qualquer outro elemento de bloco para se livrar de espaço extra vertical entre parágrafos.

Você pode querer algo como display: run-in, onde a tag se tornará bloquear ou em linha dependendo do contexto ... infelizmente, este é ainda não universalmente suportado pelos navegadores .

Answer 2

Encontrada uma forma legal de fazer exatamente isso, menos o período desagradável.

p {
  padding-left: 20px; 
} 

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

Nice e simples: D

Se as novas linhas estão incomodando em blocos p, você pode adicionar

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

jsFiddle Exemplo

Answer 3

A resposta de ysth é melhor com uma exceção discutível; a unidade de medida deve corresponder ao tamanho do tipo de letra.

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

"3" também funcionaria adequadamente bem; "Em" não é recomendado, pois é mais amplo do que o caráter médio em um conjunto alfabética. "Px" só deve ser usado se você pretende trava alinhamento de blocos de texto com diferentes tamanhos de fonte.