html - 缩进线，如果它被打破(因为只有很少的空间可用)

Question

我有两个字符串:

• foo bar baz
• 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>