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;
}

それは文字通りインデントしたい2行目だけですか、それとも2行目からのものですか（つまり、ぶら下げインデント）？

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

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

<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>

<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>

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

これは私のために働きました：

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

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

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

リストとしてスタイリングする場合

パラの最初の単語を大きくするには、2つの行をインデントする必要がありました。面倒な1回限りの解決策は、テキストをSVG要素に配置し、これを<img>と同じように配置することです。floatと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と同じです
• margin-topは、SVGテキストとパラテキストの最適な配置を可能にします
• ここで最初の2つの単語を使用して、降下者に必要な注意を思い出させます

はい、それは面倒ですが、それも含んでいるdivの幅から独立しています。

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

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

CSS3のワーキングドラフトがあり（できればすぐに）、次のように記述できます。

p { text-indent: 200px hanging; }

注目してください：https：//developer.mozilla.org/en-US/docs/Web/CSS/text-indent