Indent line, if it was broken (since only little space is available)-CodePudding

I have two strings:

Both strings are in a column which shrinks as much as possible.

Now I see:

foo
bar
baz
abc
def
ghi

This is a bit hard to read.

Is there a way to show it like this:

foo
 bar
 baz
abc
 def
 ghi

I don't want to use bullet points here, since the would take additional place.

How to do this with HTML/CSS?

CodePudding user response：

Yes it's possible. Resize the below container to see the result

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

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

<div >
  <p>foo bar baz</p>
  <p>abc def ghi</p>
</div>