Отступ начиная со второй строки абзаца с помощью CSS

Question 1

Как сделать отступ, начиная со второй строки абзаца?

я пробовал

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

Question 2

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

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

Question 3

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

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

Question 4

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

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

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

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

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

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

Question 6

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

p { text-indent: 200px hanging; }

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

Question 7

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

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

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

Answer 1

103

Как сделать отступ, начиная со второй строки абзаца?

я пробовал

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

html css text pseudo-class indentation Рувим
источник

Почему для всех отступов текста первой строки установлено значение 0? Кроме того, я не знаю, как это сделать, но в этом списке отсутствует тот, который имеет для меня наибольший смысл - отступы.

Skarlinski

Answer 2

Почему для всех отступов текста первой строки установлено значение 0? Кроме того, я не знаю, как это сделать, но в этом списке отсутствует тот, который имеет для меня наибольший смысл - отступы.

Skarlinski

Answer 3

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

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

Answer 4

3

@Reuben На основании вашего комментария, который теперь был удален, я предполагаю, что вы действительно имели в виду ОТ второй строки - и для будущих посетителей, возможно, эта скрипка лучше, где синтаксис P, а не div или span. jsfiddle.net/gg9Hx

redditor

Answer 5

1

Почему левый отступ, а затем отрицательный текстовый отступ? Почему это должно так работать? Кажется странным. Почему не просто позитив text-indent?

Дон Чидл,

Answer 6

2

Text-indent не влияет на диапазон. Его можно удалить из стиля span для того же результата.

Сэм Хаслер,

Answer 7

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

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

Answer 8

24

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

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

xoandre
источник

10

Кажется, это полная противоположность тому, о чем просил ОП. Версия @ techillage верна. Вам нужно поменять местами минус

Алекс Холсгроув

1

Это почти то, что мне было нужно. Принятый ответ не сработает для меня, потому что у меня нет свободы в моей CMS добавлять интервалы таким образом. Единственная проблема, с которой я столкнулся с этим решением, заключается в том, что левое поле вытягивает весь абзац за пределы контейнера. Я добавил position: relative и left: 2em, и это идеально. Вопреки комментарию @AlexHolsgrove, ответ techillage у меня вообще не сработал, но, возможно, потому, что я не делаю этого в элементе списка.

Стю Ферлонг,

Answer 9

10