Dot Leaders Used with Multi-line List for Index

I'm in the midst of creating an index page which lists keywords/terms which are justified left, with a dot leader and the issue link to PDF downloads justified right.

I used the dot leader list coding found at w3.org (http://www.w3.org/Style/Examples/007/leaders.en.html) to build from...

CSS:
/* Leaders */
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white}

For single line keywords/terms, the list works great. Unfortunately, there are a few terms that have quite a few issue references, which in turn flow onto subsequent lines and cause issues with the listing below it.

Specifically, in section "C" of the index, where the first instance occurs:

"Zr in Nitric Acid.......V4N3, V5N3, V6N4, V7N1, V9N1, V10N1, V10N2, V10N3, V12N1, V13N2, V15N1, V15N3, V16N1, V17N2, V18N4, V18N1"

To view the index page, go to: http://atioutlook.com/issue-index

username: test
password: test

I know enough html to be dangerous, but am not fluent. Trouble-shooting this myself has gotten me nowhere for the last two days. So, I'm hoping an expert can help me figure out how to make the lines not overlap or break the subsequent line's dot leader, and keep the list bullet aligned with the first line in the listing.

If there's a better solution to the list configuration from what I'm using, by all means, let me know.

Would really appreciate any help.

Thanks!

Hello,

By adding the property "clear" on the "ul.leaders li" selector, you could prevent the overlapping issue. You could also add a "text-align:right" on " ul.leaders span + span" in order to maintain the text to the right on the second line.

If you'd like the terms coming on the right of the first line then going under when it's too long, you'll have to reverse the floating element. The keyword should float to the left and the terms must stay in the flow with a text-align:right.