段落第一行之后的文字缩进

问题描述：

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

非常感谢大家。

答

您需要text-indent。通常text-indent会将第一行向内推，但是如果您给它一个负数，并使用正余量，则可以达到您之后的效果。

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

KennyTM在他的回答中写道，填充的使用似乎比保证金要好。 – Nicolas 2012-11-07 16:54:33

答

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

这并不像它看起来神奇的子弹，但在本质上是一样的'''TEXT-INDENT：像素; 填充左： - 像素;'''，所以它不适用于许多字体/字体大小的组合。 – certainlyakey 2017-09-11 14:34:00

答

关于内联元素可能工作方式不同，我注意到了。我需要一个“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的的余量，从而使其中的内联“一个”的元件开始时，他们的负利润率，他们实际上位置准确地在我的东西原本是在搞乱之前做出“outdent”。

希望这可以帮助别人！我还注意到有一个在文本缩进本身我的内联元素，无论是在任何大小的控制....

JSFiddle Example

答

无法使用，但现在如果您在Chrome激活Experimental Web platform Flag可以使用text-indent:1em each-line;即应做你想要的。

text-indent on MDN

当主要浏览器支持这个非常方便的功能（希望）时，值得投入未来。 – 2017-05-25 19:14:47

段落第一行之后的文字缩进

相关推荐