CSS ile bir paragrafın ikinci satırından başlayarak girinti

Bir paragrafın ikinci satırından başlayarak nasıl girintileme yapabilirim?

denedim

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

ve

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

ve

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

Eğer girinti ettirmek isteyen ikinci satır anlamıyla mi, yoksa olduğu gelen ikinci hat (yani. Bir asma girinti )?

İkincisi ise, bu JSFiddle'ın çizgisinde bir şey uygun olacaktır.

    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>

Bu örnek, bir DIV veya SPAN'da aynı CSS sözdiziminin kullanılmasının nasıl farklı efektler ürettiğini gösterir.

Sol kenar boşluğu oluştur: 2em kadar ilk satır dahil olmak üzere tüm metni sağa 2em itecektir. Daha sonra metin girintisini (ilk satıra uygulanabilir) -2em ya da öylesine ekleyin .. Bu, ilk satırı kenar boşluğu olmadan başlangıca geri getirir. Liste etiketleri için denedim

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

Bu benim için çalıştı:

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

Bir paragrafta daha büyük bir ilk kelimeye izin vermek için iki satırı girintili hale getirmem gerekiyordu. Tek seferlik zahmetli bir çözüm, metni bir SVG öğesine yerleştirmek ve bunu bir <img> ile aynı şekilde konumlandırmaktır. Float ve SVG'nin yükseklik etiketinin kullanılması, kaç satırın girintileneceğini tanımlar.

<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'nin yüksekliği ve genişliği engellenen alanı belirler.
• Y = 36, SVG metin taban çizgisinin derinliğidir ve yazı tipi boyutuyla aynıdır
• margin-top, SVG metni ve para metninin en iyi şekilde hizalanmasını sağlar
• Torunlar için gerekli bakımı hatırlatmak için burada ilk iki kelimeyi kullandık

Evet, kullanışsızdır, ancak aynı zamanda içeren div'in genişliğinden de bağımsızdır.

Yukarıdaki cevap, bir para biriminin ilk kelimelerinin daha büyük olmasına ve iki satırın üzerine yerleştirilmesine izin vermek için kendi sorguma oldu. Bir paranın ilk iki satırını girintilemek için, tüm SVG etiketlerini aşağıdaki tek piksel img ile değiştirebilirsiniz:

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

Aşağıdakileri yazmanıza izin verecek (umarız yakında) bir CSS3 çalışma taslağı vardır:

p { text-indent: 200px hanging; }

Bir göz atın: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Liste olarak stil verirsen