Einzug ab der zweiten Zeile eines Absatzes mit CSS

102

Wie kann ich ab der zweiten Zeile eines Absatzes einrücken?

ich habe es versucht

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

und

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

und 

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}
html css text pseudo-class indentation Ruben
quelle
Warum werden alle Ihre Einrückungen in der ersten Zeile auf 0 gesetzt? Ich weiß auch nicht, wie ich das machen soll, aber derjenige, der in dieser Liste fehlt, ist derjenige, der für mich am sinnvollsten ist, Polsterung.
Skarlinski

Antworten:

211

Ist es buchstäblich nur die zweite Zeile, die Sie einrücken möchten, oder stammt es aus der zweiten Zeile (dh einem hängenden Einzug )?

Wenn es das letztere ist, wäre etwas in der Art dieser JSFiddle angemessen.

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>
Erweitern Sie das Snippet

Dieses Beispiel zeigt, wie die Verwendung derselben CSS-Syntax in einem DIV oder SPAN unterschiedliche Effekte erzeugt.

Redditor
quelle
3
@Reuben Basierend auf Ihrem Kommentar, der jetzt gelöscht wurde, gehe ich davon aus, dass Sie im Gesicht von der zweiten Zeile gemeint haben - und für zukünftige Besucher ist diese Geige vielleicht besser, wenn die Syntax P nicht div oder span ist. jsfiddle.net/gg9Hx
Redditor
1
Warum der linke und dann der negative Texteinzug? Warum muss es so funktionieren? Scheint seltsam. Warum nicht einfach positiv text-indent?
Don Cheadle
2
Der Texteinzug hat keine Auswirkung auf die Spanne. Es kann aus dem Styling der Spanne entfernt werden, um das gleiche Ergebnis zu erzielen.
Sam Hasler
25

Das hat bei mir funktioniert: 

p { margin-left: -2em; 
 text-indent: 2em 
 }
xoandre
quelle
9
Dies scheint genau das Gegenteil von dem zu tun, was das OP verlangt hat. Die Version von @ techillage ist korrekt. Sie müssen das Minus
umtauschen
1
Das ist fast genau das, was ich brauchte. Die akzeptierte Antwort funktioniert bei mir nicht, da ich in meinem CMS nicht die Freiheit habe, auf diese Weise Bereiche hinzuzufügen. Das einzige Problem, das ich mit der Lösung hier hatte, ist, dass der verbleibende Rand den gesamten Absatz außerhalb eines Containers zieht. Also habe ich 'position: relative' und 'left: 2em' hinzugefügt und es ist perfekt. Im Gegensatz zu @AlexHolsgroves Kommentar hat die Antwort von techillage bei mir überhaupt nicht funktioniert, aber vielleicht, weil ich dies nicht für ein Listenelement mache.
Stu Furlong
24

Machen Sie den linken Rand: 2em oder so schiebt den gesamten Text einschließlich der ersten Zeile nach rechts 2em. Fügen Sie dann einen Texteinzug (gilt für die erste Zeile) als -2em oder so hinzu. Dadurch wird die erste Zeile wieder ohne Rand gestartet. Ich habe es für Listen-Tags versucht

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>
Vineetma
quelle
2

Wenn Sie als Liste stylen

  • Sie können "Text ausrichten: initial" und die nachfolgenden Zeilen werden alle eingerückt. Mir ist klar, dass dies möglicherweise nicht Ihren Anforderungen entspricht, aber ich habe geprüft, ob es eine andere Lösung gibt, bevor ich mein Markup ändere.

    Ich denke, die zweite Zeile einzufügen würde auch funktionieren, erfordert aber menschliches Denken, damit der Inhalt richtig fließt, und natürlich harte Zeilenumbrüche (die mich an sich nicht stören).

    • morrie
    quelle
    1
    Willkommen bei Stackoverflow. Sieht so aus, als hätten Sie eine Lösung für dieses Einrückungsproblem. Es wäre jedoch eine große Hilfe für alle, wenn Sie ein Markup bereitstellen und die Lösung erläutern würden. Möglicherweise können Sie jsfiddle.net oder einen anderen Dienst verwenden, um eine funktionierende Demo zu erstellen. Alles Gute.
    EGL 2-101
    2

    Ich musste zwei Zeilen einrücken, um ein größeres erstes Wort in einem Absatz zu ermöglichen. Eine umständliche einmalige Lösung besteht darin, Text in ein SVG-Element einzufügen und dieses wie ein <img> zu positionieren. Die Verwendung von float und des Höhen-Tags der SVG definiert, wie viele Zeilen eingerückt werden, z

    <p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    • Die Höhe und Breite der SVG bestimmen den ausgeblendeten Bereich.
    • Y = 36 ist die Tiefe der SVG-Textgrundlinie und entspricht der Schriftgröße
    • Randoberseiten ermöglichen die beste Ausrichtung des SVG-Textes und des Para-Textes
    • Verwendete hier die ersten beiden Wörter, um an die Sorgfalt zu erinnern, die für Nachkommen erforderlich ist

    Ja, es ist umständlich, aber es ist auch unabhängig von der Breite des enthaltenen div.

    Die obige Antwort war auf meine eigene Anfrage, damit das erste Wort eines Absatzes größer und über zwei Zeilen positioniert werden kann. Um einfach die ersten beiden Zeilen eines Paras einzurücken, können Sie alle SVG-Tags durch das folgende Einzelpixel-Bild ersetzen:

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />
    Tony
    quelle