Создавайте ведущие точки в CSS

Question

Как можно сделать начальные точки в оглавлении с помощью CSS?

Пример:

Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3

Answer 1

Ни одно из других решений не помогло мне. Вот мое решение, которое:

• Уважает ширину родительских элементов div.
• Не использует трюки с белым фоном, которые не учитывают динамическую среду.
• Не использует изображение точки, поэтому точка всегда может соответствовать другим цветам шрифта.
• Стоит представить в обоих направлениях и с разными или разными значениями

Точки лидера: http://jsfiddle.net/g0d8x8c5/127/

HTML

<div class="main">

  <p>Example # 1</p>

  <div class="container">
    <div class="row">
      <span>$150</span><span class="dots"></span><span>remaining credit</span>
    </div>
    <div class="row">
      <span class="spacer"></span><span>30</span><span class="dots"></span><span>remaining days</span>
    </div>
  </div>

  <p>Example # 2</p>

  <div class="container">
    <div class="row">
      <span>Food Item #1</span><span class="dots"></span><span>$12.95</span>
    </div>
    <div class="row">
      <span>Food Item #22</span><span class="dots"></span><span>$7.95</span>
    </div>
  </div>

</div>

CSS

.main {
  /* to prove it respects width of outer containers */
  width: 320px;
}

.row {
  display: flex;
}

.dots {
  /* shorthand - flex: 1 1 auto */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
 }

 .dots:before {
   content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
}

 .row span:first-child,
 .row span:last-child {
   /* shorthand - flex: 0 0 auto */
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
 }

.row span:first-child {
   padding-right: 0.33em;
}

 .row span:last-child {
   padding-left: 0.33em;
 }

 .spacer {visibility: hidden}
 .spacer:before {content: "$"}

Answer 2

Точечные лидеры могут быть сделаны без промежутков или классов. Вот адаптивное решение для таблиц HTML, измененное для центрирования лидера точки по вертикали:

http://codepen.io/Paulie-D/pen/bpMyBQ

table {
    width: 90%;
    margin:100px auto;
    table-layout:fixed;
    border-collapse: collapse;
    }

td {
    padding:1em 0 0 0;
    vertical-align:bottom;
    }

td span{
    background-color:#fff;
    }

td:first-child {
    text-align: left;
    font-weight: 700;
    overflow: hidden;
    position: relative;
    }

td:first-child::after {
    content: '';
    position: absolute;
    bottom: .4em;
    width:1500px;
    height:0px ;
    margin-left: 1em;
    border-bottom:2px dotted grey;
}

td:last-child {
    text-align:right;
    width:3em;
    }

Answer 3

Я опаздываю на вечеринку, но недавно нам пришлось сделать это на работе, и в итоге я использовал такой модуль:

http://codepen.io/ryanve/pen/rrBpJq

.dot-leader {
    position: relative;
    overflow: hidden; /* clip the dots */
}

.dot-leader__left {
    position: relative;
    display: inline-block;
}

.dot-leader__left::after {
    color: gray;
    content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    font-weight: normal;
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    margin-left: 5px; /* space left of dots */
}

.dot-leader__right {
    background: white; /* cover the dots */
    display: inline-block;
    position: absolute;
    right: 0;
    padding-left: 5px; /* space right of dots */
}

с разметкой, которая использует li.dot-leader

<ul class="is-no-padding">
    <li class="dot-leader">
        <span class="dot-leader__left">Pizza</span>
        <span class="dot-leader__right">$100</span>
    </li>
</ul>

или dl.dot-leader

<dl class="dot-leader">
    <dt class="dot-leader__left">Pizza</dt>
    <dd class="dot-leader__right">$100</dd>
</dl>

Answer 4

.dots { дисплей: встроенный блок; ширина: 325 пикселей; пустое пространство: nowrap; переполнение: скрыто! важно; переполнение текста: многоточие; }

.dot
{
    display: inline-block;
    width: 185px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}