[Turtle91]

You can use an unordered list with a different class depending on how many digits are in the number. The borders in the CSS are just to show the box-model spacing.

The mdash is not an option as a list-item marker, so I just did a quick .png file so I could use the list-style-image property. You will want to make a different image so that it aligns vertically a little better.

CSS:

p     {margin:0;
       border:1px solid green}
p.spc {margin-top:2em}

ul    {margin:-1.2em 0 0; 
       list-style-image:url('../Images/bar.png'); 
       border:1px solid red}

ul.one   {margin-left:.6em}
ul.two   {margin-left:1.15em}
ul.three {margin-left:1.7em}
ul.four  {margin-left:2.2em}

HTML:

Spoiler:

<p class="spc">1 Yellow Desert.</p>
<p>2 White Mountain.</p>
<p>3 Green Valley.</p>
<p>4
<ul class="one">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>5 Red Sea.</p>
<p>6 Yellow Desert.</p>
<p class="spc">59 Yellow Desert.</p>
<p>60 White Mountain.</p>
<p>61 Green Valley.</p>
<p>62
<ul class="two">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>63 Red Sea.</p>
<p>64 Yellow Desert.</p>
<p class="spc">159 Yellow Desert.</p>
<p>160 White Mountain.</p>
<p>161 Green Valley.</p>
<p>162
<ul class="three">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>163 Red Sea.</p>
<p>164 Yellow Desert.</p>
<p class="spc">1159 Yellow Desert.</p>
<p>1160 White Mountain.</p>
<p>1161 Green Valley.</p>
<p>1162
<ul class="four">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>1163 Red Sea.</p>
<p>1164 Yellow Desert.</p>

Unfortunately, you still won't be able to completely predict how each device will split pages. They may still split the <ul> off to the next page.