КодSEOБлогИное

Книжное содержание с точками к номеру страницы

Открыть в отдельном окне 
<style>html,
body {
  margin: 0;
  padding: 0;
}
ol {
  --main-max-width: 50em;
  --main-padding: 1em;
  max-width: var(--main-max-width);
  margin: 0 auto;
  padding: var(--main-padding);
  list-style: none;
  background: whitesmoke;
}
ol li {
  white-space: pre-wrap;
  tab-size: min(  /* выбирается то, которое меньше */
    calc(100vw - 2ch - var(--main-padding) * 2 - 17px),  /* область просмотра за минусом ширины двух цифр, ширины отступа и 17px полосы прокрутки */
    calc(var(--main-max-width) - 2ch)  /* максимальная ширина блока за минусом ширины двух цифр */
  );
}
ol span {
  border-bottom: 1px dotted #999;
}
</style>
<ol>
<li>ЧАСТЬ ПЕРВАЯ <span>&#9;</span>3
<li>Глава 1. Никогда не разговаривайте с неизвестными <span>&#9;</span>5
<li>Глава 2. Понтий Пилат <span>&#9;</span>21
<li>Глава 3. Седьмое доказательство <span>&#9;</span>52
<li>Глава 4. Погоня <span>&#9;</span>58
<li>Глава 5. Было дело в Грибоедове <span>&#9;</span>67
</ol>

Символ табуляции &#9; растягивается на необходимое расстояние. Его ширина задана свойством tab-size.

Минусы варианта:

  1. на разных устройствах может быть разная ширина полосы прокрутки,
  2. неудобно вычитать из 100vw все отступы и размеры соседних элементов.
◄▲►
Все комментарии