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


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

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

Ответы:


211

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

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


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

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

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

25

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

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

24

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

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

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

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

2

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


1

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

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

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


  • 1
    добро пожаловать в Stackoverflow. Похоже, у вас есть решение этой проблемы с отступами. Однако всем будет очень полезно, если вы сделаете разметку и объясните решение. Возможно, вы можете использовать jsfiddle.net или другой сервис для создания рабочей демонстрации. Всего наилучшего.
    EGL 2-101 02
    Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
    Licensed under cc by-sa 3.0 with attribution required.