段落第一行后的文本缩进

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 上激活“实验性 Web 平台”标志（通过转到 chrome://flags/#enable-experimental-web-platform-features ），您可以使用 text-indent:1em every-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 示例< /a>

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