自动缩进换行文本

Question

有点菜鸟，但我基本上希望文本在换行时自动缩进。 所以代替：

Peter piper picked a peck
of pickled peppers.

将会是：

Peter piper picked a peck
    of pickled peppers.

这是我尝试过的：

span.profile{ display:block; text-indent: -35px; /*this pulls the first line to the left*/ padding-left:35px; /*this pushes the paragraph to the right*/ padding-right:0px; text-align:justify; }

在此之后，我在整个文本周围添加

span class="profile"

标签，但问题是我希望它在每次换行后“重置”。有没有办法让它做到这一点？

感谢您的帮助！

Answer 1

我创建了一个小的 JSFiddle。

这是您要找的吗？

div {
    width: 500px;
}
div p {
    text-indent: -20px;
    padding-left: 25px;
}

这看起来就像你对 CSS 所做的那样，但我让它对每个段落都这样做。

请告诉我。

Answer 2

从评论来看，“我希望它在每次换行后‘重置’”似乎是指在任何

<br>

元素之后，下一行不应缩进。那么答案是否定的，你不能这样做，因为

<br>

只是一个强制换行符，CSS 中没有办法引用这样的换行符之后的行。

您应该重新设计 HTML 的使用。如果您在

display: block

元素上设置

span

，则很可能您应该使用像

div

或

p

这样的块元素。您应该使用包裹文本块的块元素，而不是使用

<br>

。

Answer 3

CSS 现在具有

hanging

和

each-line

选项，可缩进第一行之后的每一行，无需负值加填充，并将缩进应用于像

text-indent

这样的硬中断之后的行，分别。但是截至撰写本文时（2024 年 4 月），只有 Firefox 和 Safari 实现了对新选项的支持。虽然它们出现在官方 CSS 规范中，但它们相对较新。希望 Chrome 和其他浏览器能够尽快实现支持。

<br/>

/* (NOTE: Only works on Firefox and Safari as of writing!) */
.indent {
  text-indent: 3em hanging each-line;
}