Создание ведущих точек в 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.
Демо: 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 требуются чередующиеся цвета фона. Вот мой вклад, который улучшает это.
![Sample list with alternating background items]()
Это основано на отличном решении ноотропа на этой странице. Их класс "лидеров" может быть добавлен заново, если это необходимо.
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>
