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

StackOverflow https://stackoverflow.com/questions/5856952

質問

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

CSSまたはHTMLを使用して最初の行のみをターゲットにしますか？

役に立ちましたか？

解決

使用 text-indent 財産。

p { 
   text-indent: 30px;
}

jsfiddle.

他のヒント

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

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

http://jsfiddle.net/madmartigan/d4aca/1/

CSSを使用して非常に単純：

p {
    text-indent:10px;
}

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

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

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

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

CSSで：

.indent { text-indent: 30px; }

HTMLで： 

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

これは魅力のように機能しました。最初のコード例が機能しなかった理由はまだわかりません。テキストが揃っていないことを確認しました。

どうぞ：

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

CSSの初心者に対する明確な答えは見られなかったので、簡単なものです。

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

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

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

私は同じ問題に遭遇しました。私だけが複数ありました <p> タグ私は一緒に作業しなければなりませんでした。 「テキストインデント」プロパティを使用することは、すべてのものをインデントしたいと考えていました <p> タグとそれは私が望んでいたものではありません。

お客様の声のリストに派手な引用画像を追加したかったのですが、各引用の最初のCSSバックグラウンドベースの画像と画像の右側にあるテキストがあります。以来 text-indent 最初の段落だけでなく、その後のすべての段落をインデントにしていたので、私は少し回避策を講じなければなりませんでした。ただし、画像を実行しようとしていない場合も同じ方法が適用されます。

私は最初に私がインデントしたい段落の先頭に空のdivを追加することでこれを達成しました。次に、目に見えないボックスを作成するために小さな幅と高さを適用し、最後に左フロートを適用してテキストにインラインにしました。これを画像に使用している場合は、右側にマージンを追加するか、一部の空白に対して幅を少し広くするようにしてください。

これがCSSインラインの例です。クラスを簡単に作成して、CSSファイルに追加できます。

<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>

最初の行（1）を最初にインデントします。

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top