CSS/Eigenschaften/Textausrichtung/text-indent

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text-indent</title>
    <style>
      .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(http://wiki.selfhtml.org/mediawiki/images/d/d8/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; }
    </style>
  </head>
  <body>
    <h1>Erstzeilen-Einzug</h1>
<!-- 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>
  </body>
</html>
  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.

Die Eigenschaft text-indent kann folgende Werte haben:

  • Eine positive oder negative absolute Längenangabe.
  • Eine prozentuale Angabe relativ zur Breite des beinhaltenden Blocks.
  • inherit: (Standardwert)
Beachten Sie: Der Defaultwert ist inherit. Die Wirkung muss also bei Kindelementen explizit ausgeschaltet werden.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML