So erstellen Sie in CSS einen vollständig browserkompatiblen hängenden Einzugsstil in einem Span

Question

Das Einzige, was ich gefunden habe, war;

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

Die einzige Möglichkeit, dies zu erreichen, besteht darin, Text in einen Absatz einzufügen, wodurch diese schrecklich unansehnlichen zusätzlichen Zeilen entstehen.Ich hätte sie lieber einfach in einem <span class="hang"></span> Art von Sache.

Ich suche auch nach einer Möglichkeit, mehr einzurücken als nur eine einzelne Ebene aufzuhängen.Die Verwendung von Absätzen zum Stapeln der Einrückungen funktioniert nicht.

Answer 1

<span> ist ein Inline-Element.Der Begriff hängender Einzug ist bedeutungslos, es sei denn, Sie sprechen von einem Absatz (was im Allgemeinen ein Blockelement bedeutet).Sie können die Ränder natürlich ändern <p> oder <div> oder ein anderes Blockelement, um zusätzlichen vertikalen Abstand zwischen Absätzen zu beseitigen.

Vielleicht möchten Sie so etwas wie display: run-in, wobei das Tag je nach Kontext entweder Block oder Inline wird ...Leider ist das so Wird von Browsern noch nicht allgemein unterstützt.

Answer 2

Ich habe einen coolen Weg gefunden, genau das zu tun, ohne die unangenehme Zeitspanne.

p {
  padding-left: 20px; 
} 

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

Schön und einfach :D

Wenn Sie die Zeilenumbrüche in p-Blöcken stören, können Sie hinzufügen

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

JSFiddle-Beispiel

Answer 3

Die Antwort von ysth ist mit einer umstrittenen Ausnahme die beste.Die Maßeinheit sollte der Schriftgröße entsprechen.

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

„3“ würde auch ausreichend gut funktionieren;„em“ wird nicht empfohlen, da es breiter ist als das durchschnittliche Zeichen in einem alphabetischen Satz.„px“ sollte nur verwendet werden, wenn Sie Textblöcke mit unterschiedlichen Schriftgrößen ausrichten möchten.