段落第一行后的文本缩进

Question

- 楠格哈尔省苏克罗德地区的一名路透社记者称，袭击发生在该地区，村民称，在一些人开始向当地政府大楼投掷石块后，阿富汗警方向人群开枪。

在上面的段落中，我想使用CSS使第一行之后的所有行自动缩进一些空格，以便每一行都保持在第一行中的 - 之后。

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>

它类似于列表位置设置为外部的列表项，但我不想使用列表。

您能想到实现这种效果的最简单方法是什么？额外的 html 标记越少越好。

非常感谢大家。

Answer 1

你需要

text-indent

。通常 text-indent

 会将第一行向内推，但如果你给它一个负数并使用正边距，你就可以达到你想要的效果。

text-indent: -10px;
margin-left: 10px

Answer 2

p {
  text-indent: -1em;
  padding-left: 1em;
}

Answer 3

目前不可用，但如果您在 Chrome 上激活“实验性网络平台”标志（通过转到

chrome://flags/#enable-experimental-web-platform-features

 ），您可以使用 

text-indent:1em each-line;

 ，它应该完全符合您的要求。

MDN 上的文本缩进

Answer 4

我注意到，在内联元素上它的工作方式可能有所不同。我需要一个“outdent”（第一行比段落其余部分更左边），并注意到上面的建议做了相反的事情——创建了一个常规缩进（其中第一行比其他行更右边）。以下是适用于内联元素的内容，例如“a”标签：

#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }

我还将包含的块级元素设置为具有 1em 的边距，以便内联“a”元素开始的位置（其负边距）实际上准确地定位在我乱搞之前的位置。 “突出”。

希望这对某人有帮助！我还注意到我的内联元素上的文本缩进本身也没有大小控制......

JSFiddle 示例

Answer 5

基于@kennytm 的回答；如果要对齐等宽文本，请使用

ch

 单位而不是 

em

 单位。例如：

<div class="query-select">SELECT Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10</div> 带有基于

ch

 的填充/负缩进

.query-select {
  padding-left: 8ch;
  text-indent: -7ch;
} 

将渲染（基于页面宽度）为：

  SELECT Field1, Field2, Field3, Field4, Field5, Field6, 
         Field7, Field8, Field9, Field10