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;
}
html
css
text
pseudo-class
indentation
Reuben
źródło
źródło
Odpowiedzi:
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 .
Ten przykład pokazuje, jak użycie tej samej składni CSS w DIV lub SPAN daje różne efekty.
źródło
text-indent
?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
źródło
To zadziałało dla mnie:
źródło
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
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:
źródło
Istnieje wersja robocza CSS3, która (miejmy nadzieję, że wkrótce) pozwoli Ci napisać tylko:
Miej oko na: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
źródło
Jeśli stylizujesz jako lista
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ą).
źródło