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

user_633961 0
Viewed 76

I have two strings:

  • foo bar baz
  • abc def ghi

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?

css html
2 Answers

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 class="container">
  <p>foo bar baz</p>
  <p>abc def ghi</p>
</div>

user_86203330

Yes, it's possible. By simple <ul> <li>. You can see a demo here:

ul {
  padding: 0;
  margin: 0;
}
ul li {
  list-style: none;
}
ul li ul {
  padding-left: 10px;
}
<div class="container">
  <ul>
    <li>foo
      <ul>
        <li>bar</li>
        <li>baz</li>
      </ul>
    </li>
    <li>abc
      <ul>
        <li>def</li>
        <li>ghi</li>
      </ul>
    </li>
  </ul>
</div>

user_186043480
Related