Відступ, починаючи з другого рядка абзацу з 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 та параграфі тексту
• Тут використані перші два слова, щоб нагадати про турботу, необхідну для нащадків

Так, це громіздко, але воно також не залежить від ширини вміщуючого діла.

Вищеназвана відповідь була на мій власний запит, щоб дозволити збільшити перше слово (а) параграфа на два ряди. Щоб просто зробити відступ у перших двох рядках абзацу, ви можете замінити всі теги 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

Якщо ви створюєте стиль як список