From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/text-indent/index.html | 119 ++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/de/web/css/text-indent/index.html (limited to 'files/de/web/css/text-indent/index.html') diff --git a/files/de/web/css/text-indent/index.html b/files/de/web/css/text-indent/index.html new file mode 100644 index 0000000000..7c5c74219c --- /dev/null +++ b/files/de/web/css/text-indent/index.html @@ -0,0 +1,119 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - Layout + - Referenz +translation_of: Web/CSS/text-indent +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft text-indent legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("text-indent")}}
+ +
text-indent: 3mm       /* Beispielwerte */
+text-indent: 40px
+text-indent: 15%       /* Prozentuale Angaben sind relativ zur Breite des Blockelements */
+text-indent: each-line /* Festgelegte Werte */
+text-indent: hanging
+
+text-indent: inherit
+
+ +

Werte

+ +
+
<length>
+
Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. Für mögliche Einheiten, siehe {{cssxref("<length>")}} .
+
<percentage>
+
Abstand wird prozentual {{cssxref("<percentage>")}} zur Breite des enthaltenden Blockelements angegeben.
+
each-line {{experimental_inline}}
+
Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (forced line break ), lässt Zeilen nach einem soft wrap break allerdings unberührt.
+
hanging {{experimental_inline}}
+
Kehrt den Texteinzug um. Jede Zeile, außer der ersten, wird eingerückt.
+
+ +

Beispiel mit absoluter Angabe

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ +

CSS

+ +
p {
+  text-indent: 5em;
+  background: powderblue;
+}
+ +

{{ EmbedLiveSample('Simple_indent','100%','100%') }}

+ +

Beispiel mit prozentualer Angabe

+ +

HTML Content

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+ +

CSS Content

+ +
p {
+  text-indent: 30%;
+  background: plum;
+}
+ +

{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

+ +

Details

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusKommentar
{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}{{Spec2('CSS3 Text')}}Schlüsselwerte hanging und each-line hinzugefügt
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent als Eigenschaft, die animiert werden kann
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}Verhalten von display: inline-block und anderen block Containern explizit definiert
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}} 
+ +

Browserkompatibilität

+ +

{{Compat("css.properties.text-indent")}}

-- cgit v1.2.3-54-g00ecf