Crear puntos principales en CSS

¿Cuál es una buena manera de hacer puntos principales en una tabla de contenidos con CSS?

Ejemplo:

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

tomado de catchmyfame :

“¿Cómo se hace esto? Básicamente la etiqueta de campo está envuelta en un div que tiene una pequeña imagen de un punto aplicado repetidamente en la dirección x como fondo. Esto solo haría que los puntos fluyeran debajo del texto para anular ese efecto, el el texto en sí mismo se envuelve en un lapso donde el color de fondo se establece para que coincida con el color del fondo del elemento que lo contiene. Aquí está el CSS:

 .dots { background: url('dot.gif') repeat-x bottom; } .field { background-color: #FFFFFF; } 

Para aplicar esto al formulario de ejemplo, simplemente lo usaría como:

  
LastName

imagen para el punto

Esta es la mejor solución exclusiva de CSS que he encontrado para este número de líderes de punto:

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 } 

Creamos los líderes de punto con un pseudo-elemento ‘: before’ unido a los elementos LI. El pseudo-elemento llena todo el ancho del elemento de la lista con puntos y los SPAN se colocan en la parte superior. Un fondo blanco en los SPAN esconde los puntos detrás de ellos y un ‘overflow: hidden’ en el UL garantiza que los puntos no se extienden fuera de la lista.

Usé un arbitrario de 80 puntos, que es suficiente para llenar alrededor de 38em, de ahí el ancho máximo en la lista.

Es posible combinar la técnica clásica de “líderes” descrita por el w3c. Gracias a @nootrope con la alegría de flexbox.

Aquí hay un enfoque alternativo para navegadores modernos e IE 10+ .

Demostración: 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

Hice un par de ejemplos para crear lo que creo que es una buena solución. No se basa en el color de fondo para ocultar los puntos del líder. Funciona en IE8 también.

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

Construyendo sobre la respuesta de @Nico O , no hay necesidad del elemento .dots semántico.

 .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; } 
 
  • Foo Chapter 1
  • Bar Chapter 2

Muchos de estos hacks de CSS no funcionan con trasfondo secundario o son difíciles. Puede usar flex moderno y degradado de fondo para punteado (se ve más pulido, luego tabla punteada). Me gusta esto:

 .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; } 
 
E-mail: test@email
Phone: test-phone

Acutally, el W3C tiene un borrador de trabajo que describe la funcionalidad que está buscando

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

Incluso en 2005 A List Apart publicó un artículo para ello. ( http://www.alistapart.com/articles/boom ) Desafortunadamente, no parece funcionar para mí y no he encontrado mucho más. Pero tal vez vale la pena tener en cuenta que un día en el futuro cercano será posible con CSS solamente 🙂

Aquí está mi enfoque, usando elementos con estilo de borde punteado en lugar de imagen o contenido, flexiónelo y póngalo entre “Enlace” y “Capítulo”.

 .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; } 
  
Link 1
Chapter 1
Link 20
Chapter 20
Link 300
Chapter 300

.dots {display: inline-block; ancho: 325px; espacio en blanco: nowrap; desbordamiento: oculto! importante; desbordamiento de texto: puntos suspensivos; }

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

Llego tarde a la fiesta pero recientemente tuvimos que hacer esto en el trabajo y terminé usando un módulo como este:

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 */ } 

con marcado que usa li.dot-leader

 
  • Pizza $100

o dl.dot-leader

 
Pizza
$100

Los líderes de puntos se pueden hacer sin tramos o clases. Aquí hay una solución receptiva para tablas HTML, modificada para centrar el líder de punto verticalmente:

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

Ninguna de las otras soluciones funcionó para mí. Aquí está mi solución que:

  • Respeta el ancho de los padres divs.
  • No utiliza trucos de fondo blanco que no permiten entornos dynamics.
  • No utiliza una imagen de un punto, por lo que el punto siempre puede coincidir con los otros colores de fuente.
  • Vale la pena en ambos sentidos y con diferentes o diferentes valores para presentar

Líder puntos: http://jsfiddle.net/g0d8x8c5/127/

HTML

 

Example # 1

$150remaining credit
30remaining days

Example # 2

Food Item #1$12.95
Food Item #22$7.95

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: "$"}