Заполнить точками пустое пространство между словами

#html #css

Необходимо реализовать оформление, которое выглядит как оглавление в книге:
часть текста на строке прижата влево, часть - вправо, а расстояние между концом левого
и началом правого заполняется точками.
Строк будет несколько.
При этом длина текста с обоих концов заранее неизвестна, может изменяться, и на каждой
строке она будет разной.
    

Ответы

Ответ 1

Я бы вот так сделал.



ul li,
ol li {
  list-style: none;
}

ol li {
  display: flex;
  justify-content: space-between;
}

li div:nth-child(2) {
  flex: 1 0;
  border-bottom: 1px dotted #000;
  height: 1em;
  margin: 0 .4em;
}

  
Оглавление
  

    
Предисловие
    

      

        

          
Завязка
          

          
стр. 1
        
        

          
Кульминация
          

          
стр. 10
        
        

          
Развязка
          

          
стр. 100
        
      
    
    
Послесловие
    
Об авторе



Ответ 2

Необходимо добавить псевдоэлемент :after для элемента, который формирует строку.
Контентом для этого псевдоэлемента будет большое число точек, которыми надо заполнить
строку (лучше брать с небольшим запасом). Добавление свойства overflow: hidden позволит
обрезать "лишние" точки, когда она дойдут до начальной границы правого текста. Свойства
display: block и white-space: nowrap отключат перенос строки при переполнении её контентом,
т.к. точки в псевдоэлементе определённо сделают строку длинее, чем ширина контейнера.
Для красоты можно добавлять отступы для текста перед точками и после них, а также
отступ слева в начале строки, чтобы сформировать каскадную вложенность пунктов - заполнение
пустой строки точками нарушено не будет.



.book {
  width: 250px;
}
p {
    overflow: hidden;
}
p:after {  content:'..................................................';
  display: block;
  white-space: nowrap;
  overflow: hidden;
}
p span:first-of-type {
  float:left;
  margin-right: 10px;
}
p span:last-of-type {
  float:right;
  margin-left: 10px;
}

p:last-of-type{
  margin-left: 20px;
}

  
Оглавление
  
Предисловие
  
1. Завязкастр. 1
  
2. Кульминациястр. 10
  
3. Развязкастр. 100
  
Послесловие
  
Об авторе



Ответ 3

.list li{
  list-style: none;
  padding: 5px 0;
}
div {
  display: inline-block;
  vertical-align: bottom;
}
.list a {
  display: table;
  width: 100%;
  color: #000;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.list a:hover{
  color: #ff0000;
}
.list a span+span {
  padding-left: 10px;
}
span {
  display: table-cell;
}
.wr-line-dotted {
  width: 100%;
}
.line-dotted {
  display: inline-block;
  width: 100%;
  border-bottom: 1px dotted;
}
.list li ul{
  margin-top: 5px;
}

  

    

      
        Раздел I
        
          
        
        cтр. 15
      
    
  
  

    

      
        Раздел II
        
          
        
        cтр. 100
      
    
  
  

    

      
        Раздел III
        
          
        
        cтр. 256
      
    
    

      

        

          
            Параграф 1
            
              
            
            cтр. 257
          
        
      
      

        

          
            Параграф 2
            
              
            
            cтр. 384