Верстка содержания

index.html

<ul class="toc">
	<li><span>Глава 1</span><span class="page">2</span></li>
	<li><span>Глава 2. Название длинное не влезло в одну строку и получился перенос на две</span><span class="page">32</span></li>
	<li><span>Глава 3</span><span class="page">122</span></li>
</ul>

style.css

ul.toc {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	width: 524px;
}
.toc > li {
	width: 500px;
	border-bottom: 1px dotted #000;
	position: relative;
	padding-right: 24px; /* отступ равен ширине поля для номера */
	margin-bottom: 10px;
}
.toc > li span {
	background: #fff; /* перекрываем фон из точек под надписями */
	position :relative;
	bottom: -4px; /* подбирается индивидуально по шрифту */
}
.toc .page {
	position: absolute;
	right: 0;
}