Как сделать отступы в виде точек между текстом

#html #css

Есть текст: условное расписание. К примеру: 


Пн-Сб ........ 8 
19 Вс .......... Выходной


Нужно с помощью css и/или js сделать так, чтобы точки располагались между текстом,
причём они не должны быть дефолтными (круглыми), а квадратными, определённого цвета(не
цвета текста), размера и с определённым отступом между собой. При это при всём эта
конструкция должна быть адаптивной, т.е. при сужении кол-во точек должно изменяться
так, чтобы текст в правой части оставался на одной линии.

Я не прошу писать за меня код, я прошу лишь дать совет, в какую сторону копать. Пока
есть вот такая мысль: сделать обёртку и запихать туда текст по краям, с помощью float'ов,
а между затолкать какой-то блок и с помощью фона и его repeat'а заполнить точками.
Но как сделать его всегда нужной ширины не понятно.

Спрашиваю тут потому, что уверен, что эта задача тривиальная и уже наверняка имеет
красивое решение. 
    

Ответы

Ответ 1

Просто dotted:



div:first-child {
  float: left;
}

div:last-child {
  float: right;
}

section {
  overflow: hidden;
}

section:after {
  content: "\A0";
  display: block;
  overflow: hidden;
  border-bottom: 3px dotted red;
  margin-top: -6px;
}

div:first-child:after, div:last-child:before {
  content: "";
  display: inline-block;
  width: .25em;
}

  
123
  
456





С регулируемыми расстояниями:



div:first-child {
  float: left;
}

div:last-child {
  float: right;
}

section {
  overflow: hidden;
  line-height: 1.2em;
}

section:after {
  content: "";
  display: block;
  overflow: hidden;
  padding-top: 1em;
  height: 3px;
  box-sizing: content-box;
  background: repeating-linear-gradient(to right, red, red 3px, transparent 3px,
transparent 9px);
  background-clip: content-box;
}

div:first-child:after, div:last-child:before {
  content: "";
  display: inline-block;
  width: .5em;
}

  
123
  
456



Ответ 2

Первое, что пришло на ум :)

P.S не очень красивое решение.



.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.dayOfWeek {
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
}

.dayOfWeek span:after {
  content: ' .................................';
}

  
Пн-Сб
  
8-19


  
Вс
  
Выходной



Ответ 3

например:



dl {
    width: 100%;
    overflow: hidden;
}

dt {
    width: 80%;
    float: left;
    overflow: hidden;
    margin: 0px;
}

dd {
    width: 20%;
    float: right;
    overflow: hidden;
    margin: 0px;
}

dt span {
  display: block;
  white-space: nowrap;
}

dt span:after {
    content: " ................................................................................................................................................................................................................................................................";
}

  

    ПН-СБ
  

  

    8
  

  

  

    19 ВС
  

  

    Выходной
  



Ответ 4

Может так?



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.b {}

.b-inner {
  border: 4px solid #ccc;
  display: table;
  width: 100%;
}

.b-item {
  display: table-cell;
  vertical-align: middle;
  padding: 15px;
  white-space: nowrap;
}

.b-item:nth-of-type(1) {
  padding-right: 5px;
}

.b-item:nth-of-type(2) {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.b-item:nth-of-type(3) {
  text-align: right;
  padding-left: 5px;
}

.b-dotted {
  background-image: linear-gradient(to right, #f00 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 8px 4px;
  background-repeat: repeat-x;
  width: 100%;
  height: 4px;
  margin-top: 7px;
}

.b-dotted-theme-blue {
  background-image: linear-gradient(to right, #00f 40%, rgba(255, 255, 255, 0) 20%);
  background-size: 8px 4px;
}

  

    

      Пн-Сб
    
    

      

    
    

      8
    
  
  

    

      19 Вс
    
    

      

    
    

      Выходной
    
  



Ответ 5

Вот я реализовал вариант с js, Здесь можно вставить контент под свой вкус. Я поставил
круг(\u25CF) но это можно менять. И расстояния то же, они пробелами(\u00a0) разделены,
и можно менять их количество.







  
123
  
456