Seeing Paul’s example I finally understood (I hope) what you wanted.
As “text-justify:newspaper” is not supported yet, maybe you could use letter-spacing instead?
Refined Paul’s code example a little adding letter-spacing as spacing method combined with justified text lines in order to use safer spacing and still fill the line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#one{
margin:0;
padding:10px;
width:170px;
background:#f0f;
list-style:none;
}
#one li{
display:block;
margin-bottom:-1.2em; /* remove the height of the wrapping line end */
width:100%; /* IE6 */
overflow:hidden; /* hide letter space overflow */
font:20px/1.2em arial;
text-align:justify; /* fill the line when the text that has a safe smaller spacing */
}
/* find the spacing limits */
#one .a{ letter-spacing:66px; font-size:25px; font-weight:900}
#one .b{ letter-spacing:2px; font-size:16px}
#one .c{ letter-spacing:5px; font-size:20px}
#one .d{ letter-spacing:6px; font-size:16px; font-weight:900}
#one li b{
display:inline-block;
margin-right:100%; /* wrap the line end */
}
#one li a{
text-decoration:none;
color:#000;
}
#one li a b{
float:left;
margin-right:-100%;
width:100%;
}
#one li a:hover b,
#one li a:hover{
background:#fcf;
color:#f00;
font-weight:900;
}
/* text not justified in IE6-7 */
#two{
margin:0;
padding:10px;
width:170px;
background:#0cf;
list-style:none;
}
#two li{
display:block;
margin-bottom:-1.2em;
width:100%; /* IE6 */
overflow:hidden;
font:20px/1.2em arial;
text-align:justify;
}
* html #two li{ margin:0} /* IE6 */
*+html #two li{ margin:0} /* IE7 */
#two .a{ letter-spacing:66px; font-size:25px; font-weight:900}
#two .b{ letter-spacing:3px; font-size:16px}
#two .c{ letter-spacing:6px; font-size:20px}
#two .d{ letter-spacing:6px; font-size:16px; font-weight:900}
#two li:after{
display:inline-block;
padding-right:99%;
content:"\\A0";
}
#two li a{
color:#000;
text-decoration:none;
}
#two li a:hover:before,
#two li a:hover{
background:#0ff;
color:#00f;
}
</style>
</head><body>
<ul id="one">
<li><a href="#nogo">I E 6</a><b> </b></li>
<li class="a"><a href="#nogo">IE7</a><b> </b></li>
<li class="b"><a href="#nogo">Type of product you can choose</a><b> </b></li>
<li class="c"><a href="#nogo">The gallery</a><b> </b></li>
<li class="d"><a href="#nogo">All about us</a><b> </b></li>
</ul>
<ul id="two">
<li><a href="#nogo">I E 8</a></li>
<li class="a"><a href="#nogo">IE9</a></li>
<li class="b"><a href="#nogo">Type of product you can choose</a></li>
<li class="c"><a href="#nogo">The gallery</a></li>
<li class="d"><a href="#nogo">All about us</a></li>
</ul>
</body></html>