即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

在CSS中创建前导点

栈溢出 Braiam 127℃ 0评论
本文目录
[隐藏]

1.原始问题:Create leading dots in CSS

What is a nice way to do leading dots in a table of contents with CSS?

Example:

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

2.被采纳答案

taken from catchmyfame:

“How is this done? Basically 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:


    
LastName

image for the dot

3.其他高票答案

3.1.第1个答案

This is the best CSS-only solution I have found for this issue of dot leaders:

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

HTML

  • Salmon Ravioli 7.95
  • Fried Calamari 8.95
  • Almond Prawn Cocktail 7.95
  • Bruschetta 5.25
  • Margherita Pizza 10.95

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.

3.2.第2个答案

It is possible to combine the classic technique of “leaders” described by the w3c Thanks to @nootrope with the joy of flexbox.

4.Here is an alternative approach, for Modern Browsers and IE 10+.

Demo: http://jsfiddle.net/tbm62z6L/2/

 .article {
   display: flex;
 }
 .article .item,
 .article .price {
   flex: 1 0 auto;
 }
 .article .dots {
   flex: 0 1 auto;
 }
 .dots::before {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
   content: 
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
 }
sandwichtoaster $35

This is a very flexible way to display leading dots, using the current font and no need to use images.

4.1.第3个答案

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.

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

  • Item12.234
  • Another Item1,000.25
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; }

4.2.第4个答案

Building up on @Nico O‘s answer, there is no need for the un-semantic .dots element. One can simply write

  • Foo Chapter 1
  • Bar Chapter 2

as one would expect and apply the following styles

.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;
}

JSFiddle here

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-grow rule. a flex-grow of 1 while all other siblings have the default 0 will grow to the remaining space even though it has no content.

This will work until the .title and .chapter elements together fill all the space. Then the ::after pseudo element will have a width of 0 and the dotted border wont be displayed, even though the .title and .chapter will wrap their content. So if you’re sure that won’t happen, and your viewers use modern browsers this might be the optimal solution.

转载请注明:CodingBlog » 在CSS中创建前导点

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情