web-dev-qa-db-ja.com

CSSで段落の2行目から始まるインデント

段落の2行目からインデントするにはどうすればよいですか？

私はもう試した

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

そして

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

そして

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}
htmlcsstextpseudo-classindentation
82
Reuben

文字通りインデントしたい2行目ですか、それともfrom2行目です（つまり、hanging indent）？

後者の場合、この JSFiddle の行に沿ったものが適切です。

HTML

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
<br/><br/>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

CSS

div {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

span {
    padding-left: 1.5em;
    text-indent:-1.5em;
}

この例は、DIVまたはSPANで同じCSS構文を使用すると、異なる効果がどのように生じるかを示しています。

170
redditor

これは私のために働いた：

p { margin-left: -2em; 
 text-indent: 2em 
 }
22
xoandre

左マージンを作成：2emかそこらで、最初の行を含むテキスト全体を右2emにプッシュします。 text-indent（最初の行に適用可能）を-2emとして追加するなど。これにより、最初の行がマージンなしで最初に戻ります。リストタグで試しました

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>
21
vineetma

パラの最初のWordを大きくするために、2行インデントする必要がありました。面倒な1回限りの解決策は、SVG要素にテキストを配置し、これを<img>と同じように配置することです。フロートとSVGの高さタグを使用すると、インデントする行数が定義されます。

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  • SVGの高さと幅によって、ブロックされる領域が決まります。
  • Y = 36は、SVGテキストベースラインまでの深さで、font-sizeと同じです
  • マージントップは、SVGテキストとパラテキストの最適な配置を可能にします
  • ここで最初の2つの単語を使用して、子孫に必要な注意を喚起します

はい、それは扱いにくいですが、それはまた含まれているdivの幅から独立しています。

上記の答えは、パラの最初のワードを大きくして2行に配置できるようにするための独自のクエリに対するものでした。パラの最初の2行を単純にインデントするには、すべてのSVGタグを次の単一ピクセルのimgに置き換えます。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />
1
Tony

リストとしてスタイルを設定する場合

  • 「text-align：initial」を指定すると、後続の行はすべてインデントされます。これはあなたのニーズに合わないかもしれませんが、マークアップを変更する前に別の解決策があるかどうかを確認していました。

    2行目の入力も機能すると思いますが、コンテンツが適切に流れるようにするには人間の思考が必要です。

    • 1
    morrie