web-dev-qa-db-ja.com

段落内のテキストの最初の行のみをインデントしますか？

インデントしたい段落がいくつかありますが、これらの段落の最初の行だけです。

CSSまたはHTMLを使用して最初の行だけをターゲットにするにはどうすればよいですか？

htmlcssindentationtargettext-indent
52
Miles Henrichs

使用 - text-indent プロパティ。

p { 
   text-indent: 30px;
}

jsFiddle 。

157
alex

テキストのインデントに加えて、追加のスタイルを適用する場合は、:first-lineセレクターを使用できます。

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

http://jsfiddle.net/Madmartigan/d4aCA/1/

30
Wesley Murch

Cssを使用して非常に簡単：

p {
    text-indent:10px;
}

すべての段落に10ピクセルのインデントを作成します。

12
Shay Ben Moshe

また、段落の最初の行（最初の行のみ）をインデントするのに問題があり、次のコードを試していました。

p::first-line { text-indent: 30px; }

これは機能しませんでした。そこで、CSSでクラスを作成し、次のようにHTMLで使用しました。

cSSで：

.indent { text-indent: 30px; }

hTMLで：

<p class="indent"> paragraph text </p>

これは魅力的でした。最初のコード例がなぜ機能しなかったのかはまだわかりませんし、テキストが整列していないことを確認しました。

4
Wayne

どうぞ：

p:first-line {
    text-indent:30px;
}

CSSの初心者には明確な答えがなかったので、簡単に答えてみましょう。

1
PaulBGD

他の人は、CSSを介してこれを実装する最良の方法に言及していますが、インラインフォーマットで簡単に修正する必要がある場合は、次のコードを使用してください。

<p style="text-indent: 40px">This text is indented.</p>

ソース： https://www.computerhope.com/issues/ch001034.htm

0
Ibrahim Conway