在段落的第一行之后的文本缩进

– 一位路透社记者在楠格哈尔省Surkhrod地区,村民说袭击发生,说阿富汗警方向人群开枪后,其中一些开始扔石头在当地政府大楼。

在上面的段落中,我想使用CSS来创build第一行之后的所有行,以便自动缩进一些空格,以便每行在第一行之后保持正确。

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> 

这与列表位置设置为外部的列表项类似,但我不想使用列表。

为了达到这个效果,最简单的方法是什么? 更less的额外的HTML标记会更好。

非常感谢大家。

你需要文字缩进。 通常情况下,文本缩进会将第一行向内推,但如果您给它一个负数,并使用正边距,则可以达到您之后的效果。

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

内联元素可能工作不同,我注意到了。 我需要一个“outdent”(比段落的其余部分更远的第一行),并注意到上面的build议做了相反的处理 – 创build了一个正常的缩进(第一行比其他行更靠右)。 以下是内联元素的作用,例如“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”元素以其负边距开始的位置实际上将位置准确地放置在原本本来是原本的东西之前,搞乱了“减less缩进”。

希望这可以帮助别人! 我也注意到没有文本的大小控制 – 在我的内联元素上缩进本身,要么….

JSFiddle示例

现在不可用,但是如果您激活Chrome上的实验性Web平台标志 ,则可以使用text-indent:1em each-line; 这应该做你想要的。

MDN上的文本缩进