Question

- 位于楠格哈尔省Surkhrod地区的路透社记者说，村民们说袭击事件发生后，阿富汗警方开枪向当地政府大楼投掷石块后向人群开枪。

在上面的段落中，我想使用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上的Experimental Web platform Flag，则可以使用text-indent:1em each-line;，这应该可以完全按照您的要求进行操作。

text-indent on MDN

Answer 4

在内联元素上可能它的工作方式不同，我注意到了。我需要一个＆＃34; outdent＆＃34; （第一行比段落的其余部分更左侧）并注意到上面的建议相反 - 创建了一个常规缩进（其中第一行比其他行更右）。这适用于内联元素，例如，＆＃34; a＆＃34;标记：

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

我还将包含块级元素设置为具有1em的边距，以便内联＆＃34; a＆＃34;元素开始，以它们的负边缘，它们实际上确切地位于我原本应该在最初的位置之前，然后搞乱一个＆＃34; outdent＆＃34;。

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

JSFiddle Example

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

段落中第一行后的文本缩进

5 个答案: