Come creare uno stile di rientro sporgente compatibile con tutti i browser nei CSS in un intervallo

Question

L'unica cosa che ho trovato è stata;

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

L'unico modo perché funzioni è inserire il testo in un paragrafo, il che provoca quelle righe extra orribilmente sgradevoli.Preferirei di gran lunga semplicemente averli in a <span class="hang"></span> tipo di cosa.

Sto anche cercando un modo per rientrare ulteriormente rispetto a un semplice livello di sospensione.Usare i paragrafi per impilare i rientri non funziona.

Answer 1

<span> è un elemento in linea.Il termine rientro sospeso non ha senso a meno che non si parli di un paragrafo (che generalmente significa un elemento di blocco).Ovviamente puoi modificare i margini <p> O <div> o qualsiasi altro elemento di blocco per eliminare lo spazio verticale aggiuntivo tra i paragrafi.

Potresti volere qualcosa del genere display: run-in, dove il tag diventerà bloccato o in linea a seconda del contesto...purtroppo, questo è non ancora universalmente supportato dai browser.

Answer 2

Ho trovato un modo interessante per farlo, senza il fastidioso intervallo.

p {
  padding-left: 20px; 
} 

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

Bello e semplice: D

Se i ritorni a capo ti danno fastidio nei blocchi p, puoi aggiungere

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

Esempio di JSFiddle

Answer 3

la risposta di ysth è la migliore con un'eccezione discutibile;l'unità di misura dovrebbe corrispondere alla dimensione del carattere.

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

Anche "3" funzionerebbe adeguatamente bene;"em" non è consigliato poiché è più largo del carattere medio in un set alfabetico."px" dovrebbe essere utilizzato solo se si intende allineare blocchi di testo con dimensioni di carattere diverse.