64

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

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

4

8 に答える 8

178

プロパティを使用しtext-indentます。

p { 
   text-indent: 30px;
}

jsFiddle .

于 2011-05-02T12:11:52.660 に答える
34

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

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

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

于 2011-05-02T12:14:43.717 に答える
12

css を使用すると非常に簡単です。

p {
    text-indent:10px;
}

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

于 2011-05-02T12:13:19.677 に答える
2

どうぞ：

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

CSS 初心者向けの明確な答えが見つからなかったので、簡単な答えを示します。

于 2013-01-07T23:57:38.260 に答える
-3

同じ問題が発生したのは、使用する必要のある<p>タグが複数あるだけでした。「text-indent」プロパティを使用すると、すべての<p>タグをインデントしたかったのですが、それは私が望んでいたことではありません。

推薦状のリストに派手な引用画像を追加したかったのですが、各引用の最初にcss背景ベースの画像があり、画像の右側にテキストがあります。text-indent最初の段落だけでなく、後続のすべての段落をインデントさせていたため、少し回避策を講じる必要がありました。ただし、画像を作成する必要がない場合も、同じ方法が適用されます。

これは、最初にインデントしたい段落の先頭に空のdivを追加することで実現しました。次に、小さな幅と高さを適用して非表示のボックスを作成し、最後に左のフロートを適用してテキストとインラインで流れるようにしました。これを画像に使用している場合は、右側に余白を追加するか、空白のために幅を少し広くしてください。

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

<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
于 2013-02-01T06:12:18.140 に答える
-3

最初にすべての行をインデントする (1)、最初の行をアウトデントする (2)

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
于 2013-10-10T11:51:12.540 に答える