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

5 ответов


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

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


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

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

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

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

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

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

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


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

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

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

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