Html 段落中第一行后的文本缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2833068/
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
Text indent after the first line in a paragraph
提问by bobo
- A Reuters reporter in Surkhrod district in Nangarhar province, where villagers said the raids took place, said Afghan police fired at the crowd after some of them started throwing stones at local government buildings.
- 一名路透社记者在楠格哈尔省 Surkhrod 区的村民说，袭击发生在那里，在他们中的一些人开始向当地政府大楼投掷石块后，阿富汗警察向人群开枪。
In the above paragraph, I would like to use CSS to make all lines after the first line to automatically indent some space so that each line stays right after the - in the first line.
在上面的段落中，我想使用 CSS 使第一行之后的所有行自动缩进一些空格，以便每一行都紧跟在第一行的 - 之后。
HTML
HTML
<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where
villagers said the raids took place, said Afghan police fired at the crowd
after some of them started throwing stones at local government buildings.</p>
It's similar to a list item with list position set to outside, but I don't want to use a list.
它类似于列表位置设置为外部的列表项，但我不想使用列表。
What is the simplest way you can think of to achieve this effect? Less extra html markups will be better.
你能想到达到这种效果的最简单的方法是什么？少一些额外的 html 标记会更好。
Many thanks to you all.
非常感谢你们。
回答by Mathew
You need text-indent. Normally text-indentpushes the first line inwards, but if you give it a minus figure and use a positive margin, you can achieve the effect you're after.
你需要text-indent. 通常text-indent将第一行向内推，但如果给它一个负数并使用正边距，则可以达到您想要的效果。
text-indent: -10px;
margin-left: 10px
回答by kennytm
p {
text-indent: -1em;
padding-left: 1em;
}
回答by sylvain
Not usable right now but if you activate the Experimental Web platform Flagon chrome you can use text-indent:1em each-line;which should do exactly what you want.
现在不可用，但如果您在 chrome 上激活实验性网络平台标志，您可以使用text-indent:1em each-line;它应该完全符合您的要求。
回答by code-sushi
On inline elements maybe it works differently, I have noticed. I was needing an "outdent" (first line further left than rest of paragraph) and noticed the suggestions above did the opposite -- created a regular indent (where first line is further RIGHT than other lines). Here is what works for an inline element, for example, an "a" tag:
我注意到内联元素的工作方式可能有所不同。我需要一个“缩进”（第一行比段落的其余部分更靠左）并注意到上面的建议恰恰相反——创建了一个常规缩进（第一行比其他行更靠右）。以下是适用于内联元素的方法，例如“a”标签：
#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }
I also set the containing block-level element to have a margin of 1em, so that where the inline "a" elements commence, with their negative margins, they actually position exactly where I things would have been originally before messing around to make an "outdent".
我还将包含块级元素的边距设置为 1em，这样内联 "a" 元素开始的地方，它们的边距为负，它们实际上准确地定位在我的东西最初的位置，然后乱七八糟地制作一个“突出”。
Hope this helps someone! I also noticed there's no size control on the text-indent itself on my inline element, either....
希望这可以帮助某人！我还注意到我的内联元素上的文本缩进本身也没有大小控制......
回答by Jason Clark
Building on @kennytm's answer; if you want to align monospaced text, use chunits instead of emunits. For example:
基于@kennytm 的回答；如果要对齐等宽文本，请使用ch单位而不是em单位。例如：
<div class="query-select">SELECT Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10</div>
with ch-based padding/negative indents
带有ch基于填充/负缩进
.query-select {
padding-left: 8ch;
text-indent: -7ch;
}
Will render (based on page width) as:
将呈现（基于页面宽度）为：
SELECT Field1, Field2, Field3, Field4, Field5, Field6,
Field7, Field8, Field9, Field10
