html - CSS styling table of contents, annoying little details, avoiding kludge -
i'm trying recreate table of contents in css. i've gotten here before, results still incorrect, , involve lot of kludging. here image comparing original table of contents attempt @ recreating it.
as can see, there still problem: "a review of principal questions in morals" wraps after "in" instead of after "questions".
here 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 can see, messy. jsfiddle here.
does know how solve wrapping problem, preferably while cleaning css, or @ least not making worse is?
Comments
Post a Comment