Отступ, начиная со второй строки абзаца с CSS

Как я могу отступать от второй строки абзаца?

Я пробовал

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

Ответ 1

Это буквально только вторая строка, которую вы хотите отступом, или она из второй строки (т.е. висячий отступ)?

Если это последний, то что-то в соответствии с этим JSFiddle было бы подходящим.

HTML

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

CSS

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

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

В этом примере показано, как использование одного и того же синтаксиса CSS в DIV или SPAN создает различные эффекты.

Ответ 2

Это сработало для меня:

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

Ответ 3

Сделать левый край: 2 или около того будет толкать весь текст, включая первую строку справа 2em. Затем добавьте текст-отступ (применимый к первой строке) как -2 или около того.. Это возвращает первую строку, чтобы начать без поля. Я попробовал его для тегов списка

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

Ответ 4

Если вы создаете стиль в виде списка

вы можете "text-align: initial", а последующие строки будут отступать. Я понимаю, это может не соответствовать вашим потребностям, но я проверял, есть ли еще одно решение, прежде чем я изменю свою разметку.

Я предполагаю, что вторая строка будет работать, но требует человеческого мышления для правильного потока контента и, конечно же, жестких разрывов строк (которые меня не беспокоят).

Ответ 5

Мне нужно было отступать две строки, чтобы иметь большее первое слово в параграфе. Громоздкое одноразовое решение - разместить текст в элементе 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 и такая же, как размер шрифта
margin-top позволяет наилучшее выравнивание текста и абзаца SVG
Используются первые два слова здесь, чтобы напоминать о необходимости ухода за descenders

Да, это громоздко, но оно также не зависит от ширины содержащего div.

Вышеприведенный ответ заключался в моем собственном запросе, чтобы первое (-е) слово (-ы) para было больше и располагалось над двумя строками. Чтобы просто отступать первые две строки пара, вы можете заменить все теги SVG на следующий одиночный пиксель img:

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