缩进线，如果它被打破（因为只有很少的空间可用）

Question

我有两个字符串：

• 富巴巴兹
• abc def ghi

两个字符串都位于尽可能缩小的列中。

现在我明白了：

foo
bar
baz
abc
def
ghi

这有点难读。

有没有办法像这样显示：

foo
 bar
 baz
abc
 def
 ghi

我不想在这里使用要点，因为这会占用额外的位置。

如何使用 HTML/CSS 做到这一点？

Answer 1

是的，这是可能的。调整下面容器的大小以查看结果

.container {
  border: 1px solid;
  width: 300px;
  overflow: hidden;
  resize: horizontal;
}

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

<div class="container">
  <p>foo bar baz</p>
  <p>abc def ghi</p>
</div>