title: Text wrap for OL lists styled using CSS to be dotted lists, e.g. 1.1, 1.2, 1.3, etc
body: <p>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 <a href="https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1">Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?</a>.</p>
  
  <p>Here is a portion of my page:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
        .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;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;ol class="dottedlist"&gt;
        &lt;li&gt;Identify the major constraints that impact Project Management: scope, time and cost. &lt;/li&gt;
        &lt;li&gt;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.&lt;/li&gt;
        &lt;li&gt;Elaborate essential functions of the Project Manager: manage project scope; manage human resources; manage communications; manage schedule; manage quality; and manage costs. &lt;/li&gt;
        &lt;li&gt;Discuss the influence of organizational structure on Project Management effectiveness. &lt;/li&gt;
      &lt;/ol&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>