it-swarm.com.de

Einzug ab der zweiten Zeile eines Absatzes mit CSS

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;
}
84
Reuben

Ist es buchstäblich nur die zweite Zeile, die Sie einrücken möchten, oder ist es von die zweite Zeile (dh ein hängender Einzug )?

Wenn es das letztere ist, wäre etwas in der Art von JSFiddle angebracht.

[~ # ~] html [~ # ~]

<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>
<br/><br/>
<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>

[~ # ~] CSS [~ # ~]

div {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

span {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

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

174
redditor

Das hat bei mir funktioniert:

p { margin-left: -2em; 
 text-indent: 2em 
 }
23
xoandre

Make left-margin: 2em or so wird der gesamte Text einschließlich der ersten Zeile nach rechts verschoben. 2em. Dann fügen Sie einen Text-Einzug (anwendbar auf die erste Zeile) als -2em oder so hinzu. Dies bringt die erste Zeile zurück, um ohne Rand zu beginnen. Ich habe es für Listen-Tags versucht

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

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 genauso zu positionieren wie ein <img>. Mit float und dem Höhen-Tag der SVG wird festgelegt, 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 Bereich, der gesperrt ist.
  • Y = 36 ist die Tiefe der SVG-Textbasislinie und entspricht der Schriftgröße
  • randseiten ermöglichen die beste Ausrichtung von SVG- und Para-Text
  • Hier wurden die ersten beiden Wörter verwendet, um an die Pflege von Abseilern zu erinnern

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

Die obige Antwort betraf meine eigene Abfrage, um zu ermöglichen, dass das erste Wort (die ersten Wörter) eines Paras größer und über zwei Zeilen positioniert ist (sind). Um die ersten beiden Zeilen eines Paras einfach 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;" />
1
Tony

Wenn Sie als Liste stylen

  • sie können "text-align: 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).

  • 1
    morrie