如何在段落中缩进除第一行之外的所有文本？

Question

这是一个示例代码片段。

我想要做的是将第一行后面的所有内容缩进。

现在它看起来像是：

Categories: Aperiri 
nostrum similique cu 
pro, maiorum delectus 
quo eu. Mentitum

我想让它看起来像：

Categories: Aperiri 
  nostrum similique cu 
  pro, maiorum delectus 
  quo eu. Mentitum

我尝试在CSS中添加：

display: block;
margin: 2px;

但这会搞乱我的文本换行。

我该如何在CSS中实现行内显示并在第一行后缩进？

- Grammin

---

最快的方法是将您想要缩进的文本包装在<span>中，并对该span进行样式设置。 - ElendilTheTall

相关：https://dev59.com/QnrZa4cB1Zd3GeqPyh0H - Josh Crozier

错误答案怎么会被选为最佳答案了？ - Ray Butterworth

Answer 1

您可以使用带有负值的 text-indent 属性，并通过左边距进行补偿。

例如：

注：以下为翻译内容

您可以使用带有负值的 text-indent 属性，并通过左边距进行补偿。

例如：

.negative-indent {
    margin-left: 40px;
    text-indent: -40px;
}

text-indent属性的参考资料: MDN

- Bruno Toffolo

---

我可以使用display:inline;来实现这个吗？ - Grammin

我相信以下代码链接可以解决你的问题。问题在于你试图让它适用于两个div的组合，同时只调整其中一个的CSS。 :) - Bruno Toffolo

Answer 2

使用:first-line和text-indent标签。将整个文本放入一个块中（div或段落）。缩进所有行，然后将第一行设置为text-indent=0。

示例：

p { text-indent: -10px }
p:first-line { text-indent: 0 }

- Paul Facklam

Answer 3

这个怎么样？

.hClass p{
    padding-left: 20px;
}


.iClass{
    font-style: oblinque;
    color: rgb(136, 136, 136);
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
    margin-left: -20px;
}

请参见：http://jsfiddle.net/gVJK8/5/

- S. A.

---

有没有其他的解决方案，而不需要使用 padding-left？ - Sarabjit Singh

Answer 4

我曾经遇到过同样的问题。 目前为止在这里发布的答案在存在复杂布局（例如表格）的段落中去除缩进时会导致糟糕的结果（字母重叠）。

经过多次尝试，我发现以下方法不会影响这些内容。

text-indent: 0.5em hanging;

只在Chrome中尝试过。

- peter

---

在Chrome浏览器中对我不起作用。文档说“隐藏在实验性标志后面”？？？ https://caniuse.com/#feat=css-text-indent - John Henckel

刚刚在Slimjet中尝试了一下（家里不用Chrome），仍然可以正常工作，Slimjet版本为23.0.5.0（基于Chromium 74.0.3729.108）。 - peter

Answer 5

我发现使用这样简单的解决方案最好：

p:nth-child(n+2){text-indent: 3px;}

- Oren Raz

---

以下是关于 如何撰写一个好的回答？ 的一些指导。这个提供的回答可能是正确的，但它可以从一份解释中受益。仅包含代码的答案被认为不是“好”的回答。 - Trenton McKinney