51

- 一名路透社记者在楠格哈尔省 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 标记会更好。

非常感谢大家。

4

5 回答 5

83

你需要text-indent. 通常text-indent将第一行向内推，但如果你给它一个负数并使用一个正边距，你可以达到你想要的效果。

text-indent: -10px;
margin-left: 10px
于 2010-05-14T09:32:39.577 回答
45 
p {
  text-indent: -1em;
  padding-left: 1em;
}
于 2010-05-14T09:31:35.507 回答
2

目前不可用，但如果您在 chrome 上激活Experimental Web platform Flag，您可以使用text-indent:1em each-line;它应该完全按照您的意愿行事。

MDN 上的文本缩进

于 2017-01-18T11:27:15.387 回答
1

我注意到在内联元素上的工作方式可能有所不同。我需要一个“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 示例

于 2015-04-20T19:16:28.790 回答
0

以@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
于 2019-05-04T21:07:13.237 回答