CSS/Eigenschaften/Textausrichtung/text-indent

Mit der Eigenschaft text-indent definieren Sie die Einrückung der ersten Zeile eines Absatzes. Sie können durch negative Werte auch hängende Zeilen bewirken.

• 
• 
• 
• 
• 

Details: caniuse.com

Die Eigenschaft text-indent kann folgende Werte haben:

• Eine positive oder negative absolute Längenangabe.
• Eine prozentuale Angabe relativ zur Breite des beinhaltenden Blocks.
• each-line: erste Zeile des Blockelementes und alle anderen nach einem erzwungenen Umbruch
  (CSS3: wird von keinem Browser unterstützt.)
• hanging: rückt alle Zeilen außer der ersten ein.
  (CSS3: wird von keinem Browser unterstützt.)
• inherit: (Standardwert)

Beachten Sie: Der Defaultwert ist inherit. Die Wirkung muss also bei Kindelementen explizit ausgeschaltet werden.

Anwendungsbeispiel

Beispiel ansehen …

      .bookstyle        { text-indent: 4em; }
      .bookstyle > *    { text-indent: 0; }
      .datalist         { padding: 0; margin: 0; }
      .datalist li      { padding-left: 40px; text-indent: -40px; }
      .datalist li > *  { text-indent: 0; }
      .img-replace-technique {
        width: 32px;
        height: 32px;
        float: left;
        margin-right: 8px;
        text-indent: -9998px;
        overflow: hidden;
        background: url(Iconset.png);
      }
      .img-replace-technique.ff { background-position: 0 -62px; }
      .img-replace-technique.ie { background-position: 0 -31px; }
      .img-replace-technique.ch { background-position: 0 -155px; }

<!-- 1. -->
    <p class="bookstyle">Die erste Zeile erscheint eingezogen.
      Jede Zeile nach dem ersten automatischen oder expliziten
      Umbruch erscheint normal.
    </p>
<!-- 2. -->
    <ul class="datalist">
      <li>
        <strong>Ein Label:</strong>
        gefolgt von weiterem Text der nach dem Umbruch aber
        eingerückt erscheint.
      </li>
      <li>
        <strong>Ein Label:</strong>
        gefolgt von weiterem Text der nach dem Umbruch aber
        eingerückt erscheint.
      </li>
    </ul>
<!-- 3. -->
    <ul class="iconmenu">
      <li class="img-replace-technique ff">Mozilla Firefox</li>
      <li class="img-replace-technique ie">Microsoft Internet Explorer</li>
      <li class="img-replace-technique ch">Google Chrome</li>
    </ul>

1. Der Absatz im Buchstil weist eine mittels positivem text-indent-Wert eingerückte erste Zeile auf. Weil die Einrückung vererbbar ist, muss man ihr Verhalten bei Kindelementen kontrollieren.
2. Die Liste rückt jede erste Zeile durch einen negativen text-indent-Wert aus. Diese Ausrückung wird durch das padding-left jedoch kompensiert, so dass in der Tat alle Folgezeilen der Listenpunkte eingerückt sind.
3. In einem Icon-Menu sollen die Textlabels durch einen großen negativen text-indent-Wert ausgeblendet und durch die Background-Images ersetzt werden.

ansehen …

Siehe auch

• Referenz: text-indent

Weblinks

• W3C: CSS Text Module Level 3 text-indent
• MDN: text-indent