在 CSS 中创建前导点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2508732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create leading dots in CSS
提问by Bryan Denny
What is a nice way to do leading dots in a table of contents with CSS?
用 CSS 在目录中做前导点的好方法是什么？
Example:
例子：
Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3
采纳答案by Justin Gregtheitroade
Taken from this article on Leader Dots with CSS:
摘自这篇关于使用 CSS 的 Leader Dots 的文章：
The field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text. So to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element.
Here is the CSS:
.dots { background: url('dot.gif') repeat-x bottom; } .field { background-color: #FFFFFF; }To apply this to the example form, you would just use it as:
<div class="dots"> <span class="field">LastName</span> </div>
字段标签被包裹在一个 div 中，该 div 具有一个在 x 方向重复应用的小点图像作为背景。仅此一项就会导致点在文本下方流动。因此，为了消除这种影响，文本本身被包装在一个范围内，其中背景颜色设置为与包含元素的背景颜色相匹配。
这是CSS：
.dots { background: url('dot.gif') repeat-x bottom; } .field { background-color: #FFFFFF; }要将其应用于示例表单，您只需将其用作：
<div class="dots"> <span class="field">LastName</span> </div>
Here's a image to use for the dot: https://i.stack.imgur.com/otJN0.png
这是用于点的图像：https: //i.stack.imgur.com/otJN0.png
Demo in Stack Snippets
堆栈片段中的演示
.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>回答by nootrope
This is the best CSS-only solution I have found for this issue of dot leaders:
这是我为这个点领导问题找到的最好的纯 CSS 解决方案：
http://www.w3.org/Style/Examples/007/leaders.en.html
http://www.w3.org/Style/Examples/007/leaders.en.html
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
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
}
We create the dot leaders with a ‘:before' pseudo-element attached to the LI elements. The pseudo-element fills the whole width of the list item with dots and the SPANs are put on top. A white background on the SPANs hides the dots behind them and an ‘overflow: hidden' on the UL ensures the dots do not extend outside the list.
I used an arbitrary 80 dots, which is enough to fill about 38em, hence the maximum width on the list.
我们使用附加到 LI 元素的 ':before' 伪元素创建点前导。伪元素用点填充列表项的整个宽度，SPAN 放在顶部。SPAN 上的白色背景隐藏了它们后面的点，UL 上的“溢出：隐藏”确保点不会延伸到列表之外。
我使用了任意 80 个点，这足以填充大约 38em，因此是列表上的最大宽度。
回答by Nico O
It is possible to combine the classic technique of "leaders" described by the w3cThanks to @nootropewith the joy of flexbox.
感谢@nootrope可以将w3c 所描述的“领导者”的经典技术与flexbox的乐趣结合起来。
Here is an alternative approach, for Modern Browsers and IE 10+.
这是一种替代方法，适用于现代浏览器和 IE 10+。
Demo: http://jsfiddle.net/tbm62z6L/2/
演示：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"></span>
</div>This is a very flexible way to display leading dots, using the current font and no need to use images.
这是一种非常灵活的显示前导点的方式，使用当前字体而不需要使用图像。
回答by Rúnar Berg
Building up on @Nico O‘s answer, there is no need for the un-semantic .dotselement.
.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>We take advantage of the fact that we can order the children of our flex container however we want, and the fact that a pseudo element behaves like a child of where it was defined. The key is the flex-growrule. a flex-growof 1while all other siblings have the default 0will grow to the remaining space even though it has no content.
我们利用了这样一个事实，即我们可以根据需要对 flex 容器的子元素进行排序，并且伪元素的行为就像定义它的位置的子元素一样。关键是flex-grow规则。a flex-growof 1while 所有其他兄弟都有默认值0，即使它没有内容，也会增长到剩余空间。
This will work until the .titleand .chapterelements together fill all the space. Then the ::afterpseudo element will have a widthof 0and the dotted border won't be displayed, even though the .titleand .chapterwill wrap their content. So if you're sure that won't happen, and your viewers use modern browsersthis might be the optimal solution.
这将一直有效，直到.title和.chapter元素一起填满所有空间。然后::after伪元素将有一个widthof0并且不会显示虚线边框，即使.titleand.chapter将包装它们的内容。因此，如果您确定这不会发生，并且您的观众使用现代浏览器，这可能是最佳解决方案。
If you want a more sparse dots you can use a radial gradient as background on the pseudo element instead of the border-bottom:
如果你想要一个更稀疏的点，你可以使用径向渐变作为伪元素的背景而不是border-bottom：
.toc li::after {
background-image: radial-gradient(circle, currentcolor 1px, transparent 1px);
background-position-y: bottom;
background-size: 1ex 3px;
background-repeat: repeat-x;
height: 1em;
}
回答by westy808
I mashed-up a couple examples to create what I think is a pretty good solution. Doesn't rely on background color to hide the leader dots. Works on IE8 too.
我混搭了几个例子来创建我认为非常好的解决方案。不依赖背景颜色来隐藏引导点。也适用于 IE8。
http://jsfiddle.net/westy808/g0d8x8c5/1/
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;
}
回答by Denis Savenko
Many this css hack's don't work with transtarent background or to difficult. You can use modern flex and background-gradient for dotted (it's look more polished, then table dotted). Like this:
许多这种 css hack 不适用于透明背景或困难。您可以使用现代 flex 和背景渐变作为虚线（它看起来更精致，然后是表格虚线）。像这样：
.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">test@email</span>
</div>
<div class="contacts-row">
<b>Phone: </b>
<span class="dots"></span>
<span class="text">test-phone</span>
</div>回答by Ozone
Here is my approach, using element with dotted border-style instead of image or content, make it flex and put it between "Link" and "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>回答by F Lekschas
Acutally the W3C has a working draft describing the functionality you are looking for
实际上，W3C 有一份工作草案，描述了您正在寻找的功能
http://www.w3.org/TR/css3-gcpm/#leaders
http://www.w3.org/TR/css3-gcpm/#leaders
Even back in 2005 A List Apart published an article for it. (http://www.alistapart.com/articles/boom) Unfortunately It doesn't seem to work for me and I haven't found much more. But maybe it's worth keeping it in mind that one day in the near future will be possible with CSS only :)
早在 2005 年，A List Apart 就为它发表了一篇文章。( http://www.alistapart.com/articles/boom) 不幸的是它似乎对我不起作用，我还没有找到更多。但也许值得记住的是，在不久的将来有一天，仅使用 CSS 就可能实现 :)
回答by ryanve
I'm late to the party but we recently had to do this at work and I ended up using a module like this:
我参加聚会迟到了，但我们最近不得不在工作中这样做，我最终使用了这样的模块：
http://codepen.io/ryanve/pen/rrBpJq
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 */
}
with markup that uses li.dot-leader
带有使用的标记 li.dot-leader
<ul class="is-no-padding">
<li class="dot-leader">
<span class="dot-leader__left">Pizza</span>
<span class="dot-leader__right">0</span>
</li>
</ul>
or dl.dot-leader
或者 dl.dot-leader
<dl class="dot-leader">
<dt class="dot-leader__left">Pizza</dt>
<dd class="dot-leader__right">0</dd>
</dl>
回答by Cuteboy_Max
.dots { display: inline-block; width: 325px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; }
.dots { 显示：内联块；宽度：325px；空白：nowrap；溢出：隐藏！重要；文本溢出：省略号；}
.dot
{
display: inline-block;
width: 185px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
