[英]Indent starting from the second line of a paragraph with CSS
How can I indent starting from the second line of a paragraph?如何从段落的第二行开始缩进?
I've tried我试过了
p {
text-indent: 200px;
}
p:first-line {
text-indent: 0;
}
and和
p {
margin-left: 200px;
}
p:first-line {
margin-left: 0;
}
and和
(with position:relative;)
p {
left: 200px;
}
p:first-line {
left: 0;
}
Is it literally just the second line you want to indent, or is it from the second line (ie. a hanging indent )?它实际上只是您要缩进的第二行,还是来自第二行(即悬挂缩进)?
If it is the latter, something along the lines of this JSFiddle would be appropriate.如果是后者,那么按照这个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>
This example shows how using the same CSS syntax in a DIV or SPAN produce different effects.此示例显示如何在 DIV 或 SPAN 中使用相同的 CSS 语法产生不同的效果。
This worked for me:这对我有用:
p { margin-left: -2em;
text-indent: 2em
}
Make left-margin: 2em or so will push the whole text including first line to right 2em. Make left-margin: 2em 左右会将包括第一行在内的整个文本推到右边 2em。 Than add text-indent (applicable to first line) as -2em or so.. This brings first line back to start without margin.比添加文本缩进(适用于第一行)为 -2em 左右。这使第一行回到没有边距的开始。 I tried it for list tags我尝试将其用于列表标签
<style>
ul li{
margin-left: 2em;
text-indent: -2em;
}
</style>
I needed to indent two rows to allow for a larger first word in a para.我需要缩进两行以允许在段落中使用更大的第一个单词。 A cumbersome one-off solution is to place text in an SVG element and position this the same as an <img>.一种麻烦的一次性解决方案是将文本放置在 SVG 元素中,并将其定位为与 <img> 相同的位置。 Using float and the SVG's height tag defines how many rows will be indented eg使用 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>
Yes it is cumbersome but it is also independent of the width of the containing div.是的,它很麻烦,但它也与包含 div 的宽度无关。
The above answer was to my own query to allow the first word(s) of a para to be larger and positioned over two rows.上面的答案是我自己的查询,以允许段落的第一个单词更大并位于两行。 To simply indent the first two lines of a para you could replace all the SVG tags with the following single pixel img:要简单地缩进段落的前两行,您可以用以下单个像素 img 替换所有 SVG 标签:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />
There is a CSS3 working draft that will (hopefully soon) allow you to write just:有一个 CSS3 工作草案(希望很快)允许你只写:
p { text-indent: 200px hanging; }
Keep an eye on: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent请密切关注: https : //developer.mozilla.org/en-US/docs/Web/CSS/text-indent
If you style as list如果您将样式设置为列表
I guess putting the second line in would also work, but requires human thinking for the content to flow properly, and, of course, hard line breaks (which don't bother me, per se).我想把第二行放在里面也可以,但需要人类思考才能让内容正常流动,当然,硬换行(这不会打扰我,本身)。
p:first-letter {
margin-left: -10px;
}
This will work这将起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.