html - 目次の CSS スタイリング、わずらわしい細かな詳細、クラッジの回避

Question

CSS で目次を再作成しようとしています。私は以前にここでいくつかの助けを得ましたが、結果はまだ正しくなく、多くの手間がかかります. これは、元の目次と、それを再現しようとした私の試みを比較した画像です。

ご覧のとおり、まだ問題があります。「A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS」は、「QUESTIONS」ではなく「IN」の後にラップされています。

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;
}

ご覧のとおり、これは非常に厄介です。jsfiddle はこちらです。

ラッピングの問題を解決する方法を知っている人はいますか?