CODEWITHSUNDEEP
htmlcss
kofifus
kofifus

Reputation: 19276

CSS 'bullet' hanging indent using em units

I want to hanging indent 'bullets' - that is paragraphs where wrapped lines indent after the top lines prefix (ie "1. ", or "1a). "

See for example the following html

<html><body>
<div style="text-indent: -3em; padding-left: 3em;">1. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</body></html>

Why doesn't the wrapped line indent under the first bla ? and how can I achieve this effect ?

What I am looking for is a general formula so that given a prefix size, ie 3 for "1. " or 5 for "1a). ", I can work out what css and values I need to give for text-indent and padding-left to achieve proper hanging indent.

I want the solution to be consistent regardless of the document's font-size. Also I am not looking for an ordered list solution.

Upvotes: 1

Views: 404

Answers (1)

ngstschr
ngstschr

Reputation: 2319

Here is an example, with an ordered list and css counters.

ol {
  counter-reset: section;                
  list-style-type: none;
  text-indent: -1em;
}

li::before {
  counter-increment: section;
  content: counters(section,".")" ";
  display: inline-block;
  width: 1em;
}

.sub-level {
  counter-reset: inner; 
}

.sub-level li::before {
  counter-increment: inner;
  content: counter(section)"."counter(inner, lower-alpha);
}
<ol class="top-level">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</li>
  <li> quis nostrud
    <ol class="sub-level">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
      <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</li>
    </ol>
  </li>
</ol>

Upvotes: 1

Related Questions