How to wrap text correctly in nested list with counter-increment property?

Question

I have ordered list with counter-increment property. How to make long text, if it breaks into multiple lines, to have same offset from left as first line? Now second line is shown under the numbers.

Here is the fiddle (look at 2.3 item): http://jsfiddle.net/1vh1tt81/1/

I was able to achieve desired result using "position: absolute" on "li:before" element, but that caused other problems specific to my project so this is not good solution for me.

There was a similar question, but in the markup there was additonal a tag while I can't have any additional tags: https://jsfiddle.net/rkmv3rn3/10/

kukkuz · Answer 1 · 2016-09-05T09:35:44.537

3

Used table layout for the inner ol and the cells line up nicely- guess this works for you:

li > ol > li{ 
  display: table;
}

li > ol > li:before { 
  content: counters(item, ".") ". "; 
  counter-increment: item ;
  display: table-cell;
}

snippet below:

ol {
  counter-reset: item;
  display: table;
}
li {
  display: block;
}
li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
}
li > ol > li {
  display: table-row;
}
li > ol > li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
  display: table-cell;
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text
        long tex long text long tex long text long tex</li>
    </ol>
  </li>

</ol>

edited Sep 05 '16 at 09:35

answered Sep 02 '16 at 12:05

kukkuz

41,512
6
59
95

This seems to work, but I actually need the list to work well with tinymce. When your styles applied, a very high text cursor is shown when it is set before the number. And it is not possible to move cursor to the right with keyboard in that case. Here is a tinymce codepen: http://codepen.io/anon/pen/KgwWBy Also, your styles fixed text wrapping only for second level lists, so I changed it to work with first level too. – user1131522 Sep 05 '16 at 08:18
I just noticed in tinymce it works well in FireFox, but not Chrome. – user1131522 Sep 05 '16 at 08:21
Think this will nail it: give display `table-row` to `ol > li` and `table` to `ol`... let me know if this solved your problem.... – kukkuz Sep 05 '16 at 09:36
Works much better now, but big cursor is still sometimes visible. Also, checked this on Edge, now tinymce thinks every li is table cell, drag cursor is shown and content behaves like a table, LOL. http://codepen.io/anon/pen/zKxdjJ – user1131522 Sep 05 '16 at 13:34
Confused just as you are... I'll sit on it and let you know if I make any headway... – kukkuz Sep 05 '16 at 15:12
@user1131522 i'm curious if you found any solution ? – kukkuz Sep 07 '16 at 15:07
No, I didn't. Playing with "display: table" will not work there and I don't have any other ideas. – user1131522 Sep 08 '16 at 06:53

score 1 · Answer 2 · answered Sep 02 '16 at 11:44

I usually solve this by giving the counter a fixed width and a negative margin-left of the same value, and then the same padding-left on the LI:

li { 
  display: block;
  padding-left: 1.75em;
}

li:before { 
  content: counters(item, ".") ". "; 
  counter-increment: item;
  display:inline-block;
  width: 1.75em;
  margin-left: -1.75em;
}

http://jsfiddle.net/1vh1tt81/2/

(If the indention of the items is too much for your taste in this fiddle now, then you might want to override the rest of default margins/padding of the OL and LI elements.)

Without a fixed width this would be harder to achieve, and probably require an additional container element for the LI content.
Taking the counter elements out of normal flow, by positioning them absolutely in regard to the LI, might be another option to achieve a similar effect.

Thanks, but I need a dynamic solution. Positioning absolutely also does not fit my case. — user1131522, Sep 05 '16 at 08:23

Nidhin Joseph · Answer 3 · 2021-06-08T11:13:06.517

If your project allows using flex, then you could go with something like this

ol {
  counter-reset: item;
  display: block;
  padding: 0;
  margin: 0;
  flex: 1;
}

body>ol:first-child::before {
  display: block;
}

ol::before {
  display: inline-flex;
  content: '';
}

li {
  display: flex;
}

li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text
        long tex long text long tex long text long tex </li>
      <li>
        hello hello hello hello hello
        <ol>
          <li>two.one</li>
          <li>two.two</li>
          <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long
            text long tex long text long tex long text long tex </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text
        long tex long text long tex long text long tex </li>
      <li>
        hello
        <ol>
          <li>two.one</li>
          <li>two.two</li>
          <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long
            text long tex long text long tex long text long tex </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

How to wrap text correctly in nested list with counter-increment property?

3 Answers3