CSS styling table of contents, annoying little details, avoiding kludge - html

Question

I'm trying to recreate a table of contents in CSS. I've gotten some help here before, but the results are still incorrect, and they involve a lot of kludging. Here is an image comparing the original table of contents with my attempt at recreating it.
As you can see, there is still a problem: "A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS" wraps after "IN" instead of after "QUESTIONS".
Here is the CSS:
.list li {
position:relative;
overflow:hidden;
width:360px;
}
.list li:after {
font-size:120%;
content:"...............";
text-indent:1px;
display:block;
letter-spacing:40px;
position:absolute;
left:1em;
bottom:0px;
z-index:-1;
font-weight:bold;
}
.list li span {
display:inline;
max-width:100px;
background-color:#fff;
padding-right:12px;
}
.list li .number {
float:right;
font-weight:bold;
padding-left:15px;
}
.two-lines {
text-indent:-.9em;
}
.list .two-lines:after {
text-indent: 1px;
}
.two-lines .number {
bottom:0px;
right:0px;
padding-right: 1.2em;
}
As you can see, this is very messy. A jsfiddle is here.
Does anyone know how to solve the wrapping problem, preferably while cleaning up the CSS, or at least not making it worse than it already is?

Answer 1

I know this is a four year old question, so I doubt this answer is of much use to you anymore, but a simple <br> after "Questions" will fix your wrapping issue.
It seems like your wrapping not aligning exactly with the image are due to differences in fonts and specifically the width of your font, so I don't think there's a cleaner way to achieve that effect in pure css. Since responsiveness or multiuse code doesn't seem to be what you were looking for, a hard-coded solution shouldn't be an issue.
.list li {
position:relative;
overflow:hidden;
width:360px;
}
.list li:after {
font-size:120%;
content:"...............";
text-indent:1px;
display:block;
letter-spacing:40px;
position:absolute;
left:1em;
bottom:0px;
z-index:-1;
font-weight:bold;
}
.list li span {
display:inline;
max-width:100px;
background-color:#fff;
padding-right:12px;
}
.list li .number {
float:right;
font-weight:bold;
padding-left:15px;
}
.two-lines {
text-indent:-.9em;
}
.list .two-lines:after {
text-indent: 1px;
}
.two-lines .number {
bottom:0px;
right:0px;
padding-right: 1.2em;
}
<div style="width: 401px; padding-left: 90px">
<div style="margin:25px 0 200px 0">
<div style="text-align:center;font-size:150%;letter-spacing:.2em;margin-bottom:10px;margin-right:-.2em;">CONTENTS</div>
<ul class="list" style="padding-left:22px;">
<li style="margin:0 0 .6em 0;"><span>EDITOR’S INTRODUCTION</span><span class="number">ix</span>
</li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">1. Historical</span><span class="number">ix</span>
</li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">2. Epistemology</span><span class="number">xii</span>
</li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">3. Epistemology of Morals</span><span class="number">xx</span>
</li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">4. Psychology of Morals</span><span class="number">xxvi</span>
</li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">5. The Moral System</span><span class="number">xxx</span>
</li>
<li style="margin:0 0 1.5em 0;"><span style="padding-left:.9em;">6. Morals and Theology</span><span class="number">xliii</span>
</li>
<li style="margin:0 0 .5em 0; padding-left:.9em;" class="two-lines"><span>A REVIEW OF THE PRINCIPAL QUESTIONS<br> IN MORALS</span><span class="number" style="padding-left:2em;">1</span>
</li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">INDEX</span><span class="number">297</span>
</li>
</ul>
</div>
</div>
You also had a </div> where you should have had a </ul>.