CSS3 Pre-Reference



text-indent

行のインデント

試す



コード

#containe {
    text-indent: 10px;
}

サンプル

※サポートされていない単位(vw、vhなど)では動作しません。

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。
到底(あと)ってしまった。これは減る、しばらくしているがない。
これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。しかもあとって行くと。その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
すべて

パラメータ

[ <長さ> | <パーセンテージ> ] && [ hanging || each-line ]?
初期値 0
適用 ブロックコンテナ
継承 する
レベル 1-
%の解釈 コンテナブロックの幅を参照
適用メディア Vidual
参考文献 CSS Text Level 3#9.1. First Line Indentation: the ‘text-indent’ property

解説

行のインデントを指定します。

CSS2.1までは一行目の最初のインデントのみでしたが、CSS3からはネックになっていた改行後のインデントも指定できるようになりました。ただ、モダンブラウザも含めて対応はゼロですが。

キーワードは以下のものを組み合わせて利用可能です:

each-line
改行後の行頭にもインデントを付与します。
hanging
影響を受ける行を逆にします。つまり、"each-line"を指定しない場合は最初の行以外の行頭にインデントを付与します。"each-line"を指定した場合は、最初の行と改行後の行頭以外の行頭にインデントを付与します。

トラックバック

投稿されたコメント