Отступ начиная со второй строки абзаца с помощью 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 создает разные эффекты.
сделать левое поле: 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.
приведенный выше ответ был на мой собственный запрос, чтобы первое слово (ы) пара было больше и располагалось над двумя строками. Чтобы просто отступить первые две строки para, вы можете заменить все теги SVG следующим однопиксельным img:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />
Comments