I need help refining a CSS table of contents I'm working on. Despite receiving assistance previously, the final result is still incorrect and requires multiple workarounds. An image comparing the original table of contents with my recreation attempt is provided below.
The issue lies in the text "A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS" wrapping after "IN" instead of after "QUESTIONS".
Below is the current CSS code:
.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;
}
The current CSS structure seems messy. A jsfiddle link for reference can be accessed here.
I am seeking advice on resolving the text wrapping issue while also improving the cleanliness of the CSS code. Any suggestions would be greatly appreciated.