Justify text

Seeing Paul’s example I finally understood (I hope) what you wanted. :slight_smile:

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>&nbsp</b></li>
	<li class="a"><a href="#nogo">IE7</a><b>&nbsp</b></li>
	<li class="b"><a href="#nogo">Type of product you can choose</a><b>&nbsp</b></li>
	<li class="c"><a href="#nogo">The gallery</a><b>&nbsp</b></li>
	<li class="d"><a href="#nogo">All about us</a><b>&nbsp</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>

Looks good Erik :slight_smile: I got hung up on trying to make it work for partial lines which I think was a step too far.