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

Что такое хороший способ делать ведущие точки в оглавлении с CSS?

Пример:

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

Ответ 1

Взято из этой статьи о точках лидера с помощью CSS:

Метка поля обернута в элемент div, в котором имеется небольшое изображение точки, неоднократно примененной в направлении x в качестве фона. Одно это заставит точки течь под текстом. Таким образом, чтобы свести на нет этот эффект, сам текст затем оборачивается в промежуток, в котором цвет фона устанавливается так, чтобы соответствовать цвету фона содержащего элемента.

Вот CSS:
.dots { 
  background: url('dot.gif') repeat-x bottom; 
}
.field {
  background-color: #FFFFFF;
} 
Чтобы применить это к форме примера, вы просто должны использовать ее как:
<div class="dots">
    <span class="field">LastName</span>
</div>

Вот изображение, которое нужно использовать для точки: https://i.stack.imgur.com/otJN0.png

Демонстрация в фрагментах стека

.dots { 
  background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom; 
}
.field {
  background-color: #FFFFFF;
}
.link {
  width: 150px;
  display: inline-block;
}

<div class="row">
  <div class="dots link">
      <span class="field">Link</span>
  </div>
  <span class="chapter">
      Chapter 1
  </span>
</div>

<div class="row">
  <div class="dots link">
      <span class="field">Link</span>
  </div>
  <span class="chapter">
      Chapter 2
  </span>
</div>

<div class="row">
  <div class="dots link">
      <span class="field">Link</span>
  </div>
  <span class="chapter">
      Chapter 3
  </span>
</div>

Ответ 2

Это лучшее решение только для CSS, которое я нашел для этого вопроса о лидерах точек:

http://www.w3.org/Style/Examples/007/leaders.en.html

HTML

<ul class="leaders">
 <li><span>Salmon Ravioli</span> <span>7.95</span></li>
 <li><span>Fried Calamari</span> <span>8.95</span></li>
 <li><span>Almond Prawn Cocktail</span> <span>7.95</span></li>
 <li><span>Bruschetta</span> <span>5.25</span></li>
 <li><span>Margherita Pizza</span> <span>10.95</span></li>
</ul>

CSS2/CSS3

ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none
}

ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
}

ul.leaders span:first-child {
padding-right: 0.33em;
background: white
}

ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white
}

Мы создаем лидеры точек с помощью:: перед псевдоэлементом, прикрепленным к элементы LI. Псевдоэлемент заполняет всю ширину списка элемент с точками, а SPAN - сверху. На белом фоне SPANs скрывает точки за ними, а "переполнение: скрыто на UL гарантирует, что точки не выходят за пределы списка.

Я использовал произвольные 80 точек, которых достаточно, чтобы заполнить около 38 м, следовательно максимальная ширина в списке.

Ответ 3

Построение на @Nico O "s ответ, нет необходимости в ун-семантического .dots элемента.

.toc li {
  display: flex;
}

.toc li .title {
  order: 1;
}

.toc li .chapter {
  order: 3;
}

.toc li::after {
  content: "";
  border-bottom: 1px dotted;
  flex-grow: 1;
  order: 2;
}

<ul class="toc">
  <li>
    <span class="title">Foo</span>
    <span class="chapter">Chapter 1</span>
  </li>
  <li>
    <span class="title">Bar</span>
    <span class="chapter">Chapter 2</span>
  </li>
</ul>

Ответ 4

Можно объединить классическую технику "лидеров", описанную w3c Благодаря @nootrope и радости flexbox.

Вот альтернативный подход для современных браузеров и IE 10+.

Демо: http://jsfiddle.net/tbm62z6L/2/

.article {
   display: flex;
 }
 .article .item,
 .article .price {
   flex: 1 0 auto;
 }
 .article .dots {
   flex: 0 1 auto;
   /*Allows too long content to be hidden.*/
   overflow: hidden;
 }
 .dots::before {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
   content: 
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
 }

<div class="article">
  <span class="item">sandwichtoaster</span>
  <span class="dots"></span>
  <span class="price">$35</span>
</div>

Ответ 5

Я раздувал пару примеров, чтобы создать то, что я считаю довольно хорошим решением. Не полагается на цвет фона, чтобы скрыть литерные точки. Работает и на IE8.

http://jsfiddle.net/westy808/g0d8x8c5/1/

<ul class="leaders">
    <li><span>Item</span><span>12.234</span></li>
    <li><span>Another Item</span><span>1,000.25</span></li>
</ul>

ul.leaders li { clear: both; }

ul.leaders li span:first-child {
    float: left;
    padding: 0 .4em 0 0;
    margin: 0;
}
ul.leaders li span + span {
    float: right;
    padding: 0 0 0 .4em;
    margin: 0;
}

ul.leaders li:after {
    content: "";
    display: block;
    overflow: hidden;
    height: 1em;
    border-bottom: 1px dotted;
}

Ответ 6

Многие из этих css-хаков не работают с transtarent фоном или сложными. Вы можете использовать современный flex и background-gradient для точечного (он выглядит более полированным, а затем столом пунктиром). Вот так:

.contacts-row {
    display: flex;
    width: 500px;
}

.dots {
    display: block;
    background: radial-gradient(circle, rgba(0,0,0,.62) 1px, transparent 1px) repeat-x;
    background-size: 20px 28px;
    flex-grow: 10;
}

<div class="contacts-row">
    <b>E-mail: </b>
    <span class="dots"></span>
    <span class="text">[email protected]</span>
</div>

<div class="contacts-row">
     <b>Phone: </b>
     <span class="dots"></span>
     <span class="text">test-phone</span>
</div>

Ответ 7

Acutally W3C имеет рабочий проект, описывающий функциональность, которую вы ищете

http://www.w3.org/TR/css3-gcpm/#leaders

Еще в 2005 году A List Apart опубликовала статью для нее. (http://www.alistapart.com/articles/boom) К сожалению, это не работает для меня, и я не нашел больше. Но, возможно, стоит помнить, что однажды в ближайшем будущем будет возможно только с CSS:)

Ответ 8

Вот мой подход, используя элемент с пунктирным пограничным стилем вместо изображения или содержимого, сделайте его гибким и поставьте его между "Link" и "Chapter".

.toc {
  width: 500px;
}

.row {
  flex-direction: row;
  display: flex;
}

.flex-dots {
  border-top-style: dotted;
  border-top-width: 1px;
  max-height: 1px;
  margin-top: 0.5em;
}

.flex-dots-vcenter {
  flex-direction: row;
  display: flex;
}

[flex] {
  flex: 1;
}

    <div class="toc">
      <div class="row">
        <span class="field1">Link 1</span>
        <div class="flex-dots-vcenter" flex><span class="flex-dots" flex></span></div>
        <span class="field2">Chapter 1</span>
      </div>
      <div class="row">
        <span class="field1">Link 20</span>
        <div class="flex-dots-vcenter" flex><span class="flex-dots" flex></span></div>
        <span class="field2">Chapter 20</span>
      </div>
      <div class="row">
        <span class="field1">Link 300</span>
        <div class="flex-dots-vcenter" flex><span class="flex-dots" flex></span></div>
        <span class="field2">Chapter 300</span>
      </div>
    </div>

Ответ 9

.dots { display: inline-block; ширина: 325 пикселей; white-space: nowrap; переполнение: скрыто! important; переполнение текста: многоточие; }

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

Ответ 10

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

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>

Ответ 11

Руководители точек могут быть сделаны без пробелов или классов. Здесь отзывчивое решение для таблиц 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;
    }

Ответ 12

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

Уважает ширину родительских 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: "$"}

Ответ 13

Отличный вопрос и отличные ответы.

Я обнаружил, что многие из этих рабочих ответов не работают, когда для элементов li требуются чередующиеся цвета фона. Вот мой вклад, который улучшает это.

Это основано на отличном решении ноотропа на этой странице. Их класс "лидеров" может быть добавлен заново, если это необходимо.

ul{
    padding: 0;
    overflow-x: hidden;
    margin:0 0 24pt;
    list-style: none;
    list-style-type:none;
}
ul li{
    background:white;
}
ul li:nth-child(odd){
    background:lightgrey;
}
ul li:before {
    float:left;
    width:0;
    white-space:nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . ";
}
ul span:first-child {
    padding: 0 0.33em 0 0.8em;
    background:inherit;
}
ul span + span{
    float: right;
    padding: 0 0.8em 0 0.33em;
    background:inherit;
}

Основная часть, которая делает эту работу, это тщательный padding и background:inherit; в разделах ul span.

Также обратите внимание, что добавление дополнительных "заливочных" точек в ul li:before позволяет растягиваться до более широких эластичных макетов.

Надеюсь, что это поможет вам.

Ответ 14

Мне нужно, чтобы мой клиент мог легко редактировать прайс-лист на своем веб-сайте, поэтому я создал необработанный контент в виде простой HTML-таблицы с двумя столбцами. Это супер легко редактировать в любой CMS

Затем, опираясь на предыдущие ответы и имея возможность обрабатывать данные, отформатированные в виде таблицы, я использовал следующее. Я попробовал подход пунктирной нижней границы, но это довольно уродливо. Таким образом, я пошел с подходом "точки как содержание".

.toc table {
    width: unset;
	margin: 0 auto;
	margin-top: 1ex;
	display: block;
}
.toc  table tbody {
	display: block;
}
.toc  table tr {
	display: flex;
}
.toc  table tr td {
	width: auto !important;
}
.toc  table tr td:first-child {
	order: 1;
	white-space: nowrap;
}
.toc  table tr td:last-child {
	order: 3;
	white-space: nowrap;
}  
.toc  table tr:after {
	flex-grow: 1;
	order: 2;
	content: ". . . . . . . . . . . . . . . . . . . . " 
	". . . . . . . . . . . . . . . . . . . . " 
	". . . . . . . . . . . . . . . . . . . . " 
	". . . . . . . . . . . . . . . . . . . . ";
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

<div class="toc">
    <table>
        <tbody>
            <tr>
                <td>
                    Product 1
                </td>
                <td>$123,456</td>
            </tr>
            <tr>
                <td>Product 2</td>
                <td>$12,345</td>
            </tr>
        </tbody>
    </table>
</div>