aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/css/text-indent/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/web/css/text-indent/index.html')
-rw-r--r--files/de/web/css/text-indent/index.html119
1 files changed, 119 insertions, 0 deletions
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
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eigenschaft <code>text-indent</code><font face="Consolas"> </font>legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-indent")}}</pre>
+
+<pre>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
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. Für mögliche Einheiten, siehe {{cssxref("&lt;length&gt;")}} .</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Abstand wird prozentual {{cssxref("&lt;percentage&gt;")}} zur Breite des enthaltenden Blockelements angegeben.</dd>
+ <dt><code>each-line</code> {{experimental_inline}}</dt>
+ <dd>Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (<em>forced line break</em> ), lässt Zeilen nach einem <em>soft wrap break</em> allerdings unberührt.</dd>
+ <dt><code>hanging</code> {{experimental_inline}}</dt>
+ <dd>Kehrt den Texteinzug um. Jede Zeile, außer der ersten, wird eingerückt.</dd>
+</dl>
+
+<h2 id="Simple_indent" name="Simple_indent">Beispiel mit absoluter Angabe</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+ text-indent: 5em;
+ background: powderblue;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p>
+
+<h2 id="Percentage_indent_example" name="Percentage_indent_example">Beispiel mit prozentualer Angabe</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">p {
+ text-indent: 30%;
+ background: plum;
+}</pre>
+
+<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</p>
+
+<h2 id="Details">Details</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}</td>
+ <td>{{Spec2('CSS3 Text')}}</td>
+ <td>Schlüsselwerte <code>hanging</code> und <code>each-line</code> hinzugefügt</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
+ <td>{{Spec2('CSS3 Transitions')}}</td>
+ <td><code>text-indent</code> als Eigenschaft, die animiert werden kann</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
+ <td>{{Spec2('CSS2.1')}}</td>
+ <td>Verhalten von <code>display: inline-block</code> und anderen <code>block </code>Containern explizit definiert</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
+ <td>{{Spec2('CSS1')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("css.properties.text-indent")}}</p>