Html 使用 CSS 从段落的第二行开始缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17158253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Indent starting from the second line of a paragraph with CSS
提问by Reuben
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;
}
回答by redditor
Is it literally just the second line you want to indent, or is it fromthe second line (ie. a hanging indent)?
它实际上只是您要缩进的第二行，还是来自第二行（即悬挂缩进）？
If it is the latter, something along the lines of this JSFiddlewould 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 语法产生不同的效果。
回答by xoandre
This worked for me:
这对我有用：
p { margin-left: -2em;
text-indent: 2em
}
回答by vineetma
Make left-margin: 2em or so will push the whole text including first line to right 2em. Than add text-indent (applicable to first line) as -2em or so.. This brings first line back to start without margin. I tried it for list tags
Make left-margin: 2em 左右会将包括第一行在内的整个文本推到右边 2em。比添加文本缩进（适用于第一行）为 -2em 左右。这使第一行回到没有边距的开始。我尝试将其用于列表标签
<style>
ul li{
margin-left: 2em;
text-indent: -2em;
}
</style>
回答by morrie
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).
我想把第二行放在里面也可以，但需要人类思考才能让内容正常流动，当然，硬换行（这不会打扰我，本身）。
回答by Tony
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>. Using float and the SVG's height tag defines how many rows will be indented e.g.
我需要缩进两行以允许在段落中使用更大的第一个单词。一种麻烦的一次性解决方案是将文本放置在 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's height and width determine area blocked out.
- Y=36 is the depth to the SVG text baseline and same as font-size
- margin-top's allow for best alignment of the SVG text and para text
- Used first two words here to remind care needed for descenders
- SVG 的高度和宽度决定了被遮挡的区域。
- Y=36 是到 SVG 文本基线的深度，与 font-size 相同
- margin-top 允许 SVG 文本和辅助文本的最佳对齐
- 在这里使用前两个词来提醒后代需要照顾
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;" />
