Отступ начиная со второй строки абзаца с помощью 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;
}

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

Если это последнее, было бы уместно что-то вроде этого 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>

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

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

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

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

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

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

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

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

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

Существует рабочий проект CSS3, который (надеюсь, скоро) позволит вам писать просто:

p { text-indent: 200px hanging; }

Следите за: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Если вы оформляете как список