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

103

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;
}
Reuben
źródło
Dlaczego wszystkie wcięcia tekstu pierwszego wiersza są ustawione na 0? Nie wiem też, jak to zrobić, ale ten, którego brakuje na tej liście, jest dla mnie najbardziej sensowny, wypełnienie.
Skarlinski

Odpowiedzi:

211

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.

redditor
źródło
3
@Reuben Opierając się na Twoim komentarzu, który został teraz usunięty, zakładam, że zrobiłeś to bezpośrednio z drugiej linii - i ze względu na przyszłych odwiedzających, być może to skrzypce jest lepsze, gdzie składnia to P, a nie div lub span. jsfiddle.net/gg9Hx
redditor
1
Dlaczego dopełnienie w lewo, a następnie negatywne wcięcie tekstu? Dlaczego to musi tak działać? Wydaje się dziwne. Dlaczego nie tylko pozytywny text-indent?
Don Cheadle
2
Wcięcie tekstu nie ma wpływu na rozpiętość. Można go usunąć ze stylizacji przęsła, aby uzyskać ten sam efekt.
Sam Hasler
25

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>
vinetma
źródło
24

To zadziałało dla mnie:

p { margin-left: -2em; 
 text-indent: 2em 
 }
xoandre
źródło
10
Wydaje się, że jest to zupełne przeciwieństwo tego, o co prosił PO. Wersja @ techillage jest poprawna. Musisz zamienić minus
Alex Holsgrove
1
To jest prawie dokładnie to, czego potrzebowałem. Przyjęta odpowiedź nie zadziała, ponieważ nie mam swobody w moim CMS, aby dodawać przęsła w ten sposób. Jedynym problemem, jaki miałem z rozwiązaniem tutaj, jest to, że lewy margines wyciągnie cały akapit poza kontener. Dodałem więc „położenie: względne” i „lewo: 2em” i jest idealne. W przeciwieństwie do komentarza @AlexHolsgrove, odpowiedź techillage w ogóle nie zadziałała, ale może dlatego, że nie robię tego na elemencie listy.
Stu Furlong
2

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;" />
Tony
źródło
1

Jeśli stylizujesz jako lista

  • możesz „wyrównać tekst: początkowy”, a kolejne wiersze będą wcięte. Zdaję sobie sprawę, że to może nie odpowiadać Twoim potrzebom, ale zanim zmienię znaczniki, sprawdzałem, czy istnieje inne rozwiązanie.

    Wydaje mi się, że wstawienie drugiej linii również by działało, ale wymaga ludzkiego myślenia, aby treść płynęła prawidłowo i, oczywiście, twardych podziałów linii (które same w sobie nie przeszkadzają).

  • morrie
    źródło
    1
    witamy w Stackoverflow. Wygląda na to, że masz jakieś rozwiązanie tego problemu z wcięciami. Jednak byłoby bardzo pomocne dla wszystkich, gdybyś dostarczył jakieś znaczniki i wyjaśnił rozwiązanie. Być może możesz użyć jsfiddle.net lub innej usługi, aby stworzyć działające demo. Wszystkiego najlepszego.
    EGL 2-101