Wcięcie zaczynając od drugiej linii akapitu za pomocą CSS

Jak mogę utworzyć wcięcie, zaczynając od drugiego wiersza akapitu?

próbowałem

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

i

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

i

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

Czy jest to dosłownie tylko druga linia, w której chcesz wprowadzić wcięcie, czy może pochodzi ona z drugiej linii (tj. Wysunięcie )?

Jeśli jest to drugie, odpowiednie byłoby coś w rodzaju tego 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>

Ten przykład pokazuje, jak użycie tej samej składni CSS w DIV lub SPAN daje różne efekty.

Zrób lewy margines: około 2em przesunie cały tekst, w tym pierwszą linię, do prawej 2em. Następnie dodaj wcięcie w tekście (dotyczy pierwszego wiersza) jako około -2em .. Powoduje to powrót pierwszego wiersza do początku bez marginesów. Wypróbowałem to dla tagów list

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

To zadziałało dla mnie:

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

Musiałem dodać wcięcie o dwa wiersze, aby w akapicie było większe pierwsze słowo. Uciążliwym jednorazowym rozwiązaniem jest umieszczenie tekstu w elemencie SVG i umieszczenie go tak samo jak <img>. Użycie liczby zmiennoprzecinkowej i znacznika wysokości SVG określa, ile wierszy zostanie wciętych, np

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

• Wysokość i szerokość SVG określają zablokowany obszar.
• Y = 36 to głębia linii bazowej tekstu SVG i taka sama jak rozmiar czcionki
• Marginesy górne pozwalają na najlepsze wyrównanie tekstu SVG i tekstu para
• Użyłem tutaj pierwszych dwóch słów, aby przypomnieć o trosce o zjazdach

Tak, jest to kłopotliwe, ale jest również niezależne od szerokości zawierającego div.

Powyższa odpowiedź dotyczyła mojego własnego zapytania, aby pierwsze słowo (a) para było większe i umieszczone w dwóch wierszach. Aby po prostu wciąć pierwsze dwa wiersze para, możesz zastąpić wszystkie tagi SVG następującym obrazem jednopikselowym:

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

Istnieje wersja robocza CSS3, która (miejmy nadzieję, że wkrótce) pozwoli Ci napisać tylko:

p { text-indent: 200px hanging; }

Miej oko na: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Jeśli stylizujesz jako lista