Text wrap for OL lists styled using CSS to be dotted lists, e.g. 1.1, 1.2, 1.3, etc

Question

I am working on the content for an online class I am developing and need to include college-specified course objectives. Each week, I will have a page that will list the course objectives. The objectives are listed using OL with CSS to create a list of the form UnitNum.1, UnitNum.2, etc. I was able to get that working based on the advice at Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?.

Here is a portion of my page:

<html>
  <head>
    <title></title>
    <style type="text/css">
      .dottedlist {
         counter-reset: dottedlistcnt;
      }
      .dottedlist li {
         list-style-type: none;
      }
      .dottedlist li::before {
         counter-increment: dottedlistcnt;
         content: "1." counter(dottedlistcnt) " ";
      }
      .dottedlist li {
         list-style-position: outside;
      }
    </style>
  </head>

  <body>
    <ol class="dottedlist">
      <li>Identify the major constraints that impact Project Management: scope, time and cost. </li>
      <li>Differentiate between IT projects and other kinds of projects: skills; turnover rates; uniqueness and complexity; visualization; requirements gathering; changing requirements; technology changes; software testing; and training.</li>
      <li>Elaborate essential functions of the Project Manager: manage project scope; manage human resources; manage communications; manage schedule; manage quality; and manage costs. </li>
      <li>Discuss the influence of organizational structure on Project Management effectiveness. </li>
    </ol>

  </body>
</html>

The problem in the rendering are where the text wraps around for items 1.2 and 1.3 and is below the numbering, whereas I would like it to be aligned with the text above (each) line.

Additionally, does anyone know if there is a way I can parameterize the number 1 in .dottedlist li::before, so that on the other pages when I am dealing with other units I can simply add that in?

The wraps depends on screen size. On mine, they don't get wrapped. Make your `ol` e.g. 1000px wide to demonstrate it better :) — BalusC, Dec 21 '10 at 21:05
LMGTFY [oh it's already been answered](http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1). — zzzzBov, Dec 21 '10 at 21:07
oh, he's suposed to put padding on the `li` elements. Then abs pos the counter within the padding. — zzzzBov, Dec 21 '10 at 21:14
Possible duplicate of [Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?](https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1) — Kay V, Jan 04 '18 at 12:14

BalusC · Accepted Answer · 2010-12-21T21:33:19.217

That's not possible since the :before is placed inside the li, not outside.

Consider JavaScript. Here's a jQuery based demo. You can copy'n'paste'n'run it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4503825</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('ol.dottedlist').each(function(i, ol) {
                    $ol = $(ol);
                    $ol.children('li').each(function(i, li) {
                        $li = $(li);
                        var level = '1.' + ($li.index() + 1);
                        $li.prepend('<span>' + level + '</span>');
                    });
                });
            });
        </script>
        <style>
            ol.dottedlist {
                list-style-type: none;
            }
            ol.dottedlist li span {
                margin: 0 5px 0 -25px;
            }
        </style>
    </head>
    <body>
        <ol class="dottedlist">
            <li>Identify the major constraints that impact Project Management: scope, time and cost. </li>
            <li>Differentiate between IT projects and other kinds of projects: skills; turnover rates; uniqueness and complexity; visualization; requirements gathering; changing requirements; technology changes; software testing; and training.</li>
            <li>Elaborate essential functions of the Project Manager: manage project scope; manage human resources; manage communications; manage schedule; manage quality; and manage costs. </li>
            <li>Discuss the influence of organizational structure on Project Management effectiveness. </li>
        </ol>
    </body>
</html>

As an extra bonus: it works on older browsers (IE6/7/etc) as well.

David Thomas · Answer 2 · 2010-12-21T21:43:30.380

I'm unsure, exactly, of your use-case, but with the following mark-up:

<ol>
    <li>
        <ol>
            <li>The first nested item</li>
            <li>The second nested Item</li>
        </ol>
    </li>
    <li>
        <ol>
            <li>More nesting</li>
            <li>And even more...</li>
        </ol>
    </li>
</ol>

And CSS:

ol {
    list-style-position: outside;
    counter-reset: section;
    padding: 0.5em 1em;
    margin: 0 1em;
}
ol li {
    counter-increment: section;
}
ol li ol {
    counter-reset: subsection;
}

ol li ol li {
    counter-increment: subsection;
}

ol li:before {
    content: "Section: " counter(section);
    width: 3em;
    margin: 0 1em 0 0;
}

ol li ol li:before {
    content: counter(section) "." counter(subsection);
}

It's certainly possible (though I'm not sure exactly what your question is), but here's a JS Fiddle demo

Edited to address the text-wrapping issue that (somehow) passed me by the first time.

My approach to this is to give the containing li position: relative; and move it left by 1em, then giving the li:before content position: absolute; and left: -1em (which is a bit unclean, to my tastes, but it works). The revised CSS is below:

ol {
    list-style-position: outside;
    counter-reset: section;
    padding: 0.5em 1em;
    margin: 0 1em;
}
ol li {
    counter-increment: section;
}
ol li ol {
    counter-reset: subsection;
}

ol li ol li {
    counter-increment: subsection;
    position: relative;
    left: 1em;
}

ol li:before {
    content: "Section: " counter(section);
    width: 3em;
    margin: 0 1em 0 0;
}

ol li ol li:before {
    content: counter(section) "." counter(subsection);
    position: absolute;
    left: -2em;
    width: 2em;
}

And comes with a revised JS Fiddle demo

score 0 · Answer 3 · answered Dec 21 '10 at 21:20

Alright, starting with apologies for misreading the question: Sorry for that.

You can get the spacing you want by giving the list-items some padding, and positioning the counter within the padding.

You can parameterize the values by creating some id's that can be tied to different counter-reset values

#counter-1
{
  counter-reset: 1;
}
#counter-2
{
  counter-reset: 2;
}
etc...

It will take some work, but I believe it works.

score -1 · Answer 4 · answered Dec 21 '10 at 21:02

-1

Actually, in CSS 2.0 and previous this isn't directly possible - you can't really mess with the numbering other than the start number.

CSS 3.0 might support it, but I'm not sure of browser support for CSS 3.0 and above.

answered Dec 21 '10 at 21:02

Scott Baker

10,013
17
56
102

-1 because it's wrong. CSS2 *can* do [this](http://www.w3.org/TR/CSS2/generate.html). It's not supported in Internet Exploder though. – zzzzBov Dec 21 '10 at 21:06

Text wrap for OL lists styled using CSS to be dotted lists, e.g. 1.1, 1.2, 1.3, etc

4 Answers4