Question

0

268

Views

Líderes de puntos CSS en la primera línea sobre un fondo complejo

Necesito implementar líderes de puntos después de la primera línea de texto usando CSS para usarlo sobre fondo de textura/imagen.

Comportamiento esperado:

Vi algunas implementaciones de líderes de puntos en Internet. Todos utilizan una de las siguientes técnicas:

::después de puntos + desbordamiento

 <div class=item1> <span class=text1> Text </span> <span class=price1> $100 </span> </div>

 .item1 { display: flex; } .text1 { flex-grow: 1; position: relative; overflow: hidden; } .text1::after { content: ''; position: absolute; bottom: 0; border-bottom: 1px dotted grey; width: 100%; } .price1 { align-self: flex-end; }

puntos absolutos + fondo blanco

 <div class=item2> <span class=text2> <span class=bg2> Text </span> </span> <span class=price2> <span class=bg2> $100 </span> </span> </div>

 .item2 { display: flex; justify-content: space-between; position: relative; mix-blend-mode: darken; } .item2::before { content: ''; position: absolute; top: 1em; left: 0; right: 0; border-bottom: 1px grey dotted; } .bg2 { background: white; position: relative; z-index: 1; }

caja flexible tonta

 <div class=item3> <span class=text3> Text </span> <span class=dots3></span> <span class=price3> $100 </span> </div>

 .item3 { display: flex; align-items: flex-start; } .dots3 { flex-grow: 1; border-bottom: 1px dotted grey; min-width: 10px; height: 1em; }

Todos se muestran aquí: https://jsfiddle.net/rzmLg4yu/62/

Cada una de estas técnicas tiene sus propias trampas en mi caso.

Tiene líderes de punto en la última línea.
No funciona sobre un fondo complejo, incluso con el modo mix-blend (elimine el comentario de la línea bg para ver).
Tiene grandes espacios en blanco debido a los saltos de línea (cambie el tamaño para ver). Cambiar a la red no sirve.

¿Hay más soluciones para este caso?

over 4 years ago · Santiago Trujillo

5 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-03-03T18:33:01.734Z

La técnica 3 se puede mejorar para eliminar los espacios de envoltura:

 body { color: grey; } .width { width: 300px; padding: 5px; resize: horizontal; overflow: hidden; abackground: linear-gradient(45deg, yellow, black); background-repeat: repeat-x; background-size: 200px 100%; } .item3 { display: flex; align-items: flex-start; } .dots3 { flex-grow: 1; border-bottom: 1px dotted grey; min-width: 10px; height: 1em; } .text3 { padding-right: 0px; text-align: justify; /* <--- */ }

 <div class=width> <div class=item3> <span class=text3> 3 Text text </span> <span class=dots3></span> <span class=price3> $100 </span> </div> <div class=item3> <span class=text3>3 Text text text text text text text text text text text text text text text text</span> <span class=dots3></span> <span class=price3> $100 </span> </div>

Aquí text-align: justify; espaciará las palabras uniformemente.

Creo que su problema con la segunda técnica se debe al color de fondo blanco, ¿verdad?
debido a .bg2 {background: white;...} ?
De lo contrario, debería haber usado mix-blend-mode: lighten; para demostrar el problema:

 body { color: grey; padding: 20px; } .width { width: 230px; padding: 5px; resize: horizontal; overflow: auto; background: linear-gradient(90deg, yellow, black); background-repeat: repeat-x; background-size: 200px 100%; } div>div { background-color: white; border: 2px solid green; } .simpleDiv1 { mix-blend-mode: darken; } .simpleDiv2 { margin-top: 20px; mix-blend-mode: lighten; }

 <div class=width> <div class=simpleDiv1>darken blend. Simple text without any styles and stuff.</div> <div class=simpleDiv2>lighten blend. Simple text without any styles and stuff.</div> </div>

Si usa oscurecer la mezcla, cualquier texto normal desaparecerá con ese fondo, y mucho menos los líderes de puntos.

Técnica dos sin fondo blanco:

 body { color: grey; padding: 20px; } .width { width: 230px; padding: 5px; resize: horizontal; overflow: hidden; abackground: linear-gradient(90deg, yellow, black); background-repeat: repeat-x; background-size: 200px 100%; } .item2 { display: flex; justify-content: space-between; position: relative; mix-blend-mode: darken; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: white; text-decoration-thickness: 2px; } .item2::before { content: '\00a0'; height: calc(1em - 0.5px); position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px dotted gray; z-index: -1; }

 <div class=width> <div class=item2> <span class=text2> 2 Text text </span> <span class=price2> $100 </span> </div> <div class=item2> <span class=text2> 2 Text text text text text text text text text text text text text text text text </span> <span class=price2> $100 </span> </div> </div>

Aquí estoy usando un subrayado blanco, en lugar de un fondo completamente blanco, para ocultar el líder de puntos. Pero obtendrá un subrayado blanco al usar algunos modos de fusión.

La técnica tres se puede mejorar si estamos dispuestos a dividir las palabras al envolver:

 body { color: grey; } .width { width: 300px; padding: 5px; resize: horizontal; overflow: hidden; abackground: linear-gradient(45deg, yellow, black); background-repeat: repeat-x; background-size: 200px 100%; } .item3 { display: flex; align-items: flex-start; } .dots3 { flex-grow: 1; border-bottom: 1px dotted grey; min-width: 10px; height: 1em; } .text3 { padding-right: 0px; word-break: break-all; }

 <div class=width> <div class=item3> <span class=text3> 3 Text text </span> <span class=dots3></span> <span class=price3> $100 </span> </div> <div class=item3> <span class=text3>3 Text text text text text text text text text text text text text text text text</span> <span class=dots3></span> <span class=price3> $100 </span> </div>

Aquí, en lugar de ajustar los límites de las palabras, estoy ajustando los límites de las letras usando word-break: break-all . Si el tamaño de su fuente es de 1em, de esta manera el espacio máximo será inferior a 1em, porque el navegador no podrá ajustar una letra de menos de 1em de espacio.

Answer 2 · 2022-03-03T18:33:02.132Z

Incluso la fuente oficial del W3C tiene alguna disparidad. Es posible que vea una representación inconsistente o un soporte deficiente para las funciones inventadas (como no monoespaciadas/preformateadas, relleno de ceros iniciales, anchos de moneda variados).

Sería recomendable usar una cuña o un componente web como Leader-Line . Le recomendaría que experimente con la animación de guiones para aumentar la visibilidad en fondos ocupados (a expensas de molestar a alguien con un líder ocupado).

Answer 3 · 2022-03-03T18:33:02.675Z

Tres mejoras para la segunda técnica

Sugiero usar el valor multiply para la propiedad mix-blend-mode . En el caso de texto oscuro, da un resultado más nítido incluso en un fondo degradado. Mira la primera demostración.
Podemos simplificar el diseño de la segunda técnica con la ayuda del pseudoelemento ::first-line . Se puede usar con " solo un pequeño subconjunto de propiedades CSS ", pero este subconjunto contiene todas las propiedades relacionadas con el fondo.
Creo que esto también da un mejor resultado contra mix-blend-mode: darken . Compare la segunda y la tercera demostración.
Y la propiedad gap ayuda a establecer el espacio mínimo entre el texto y el precio.

Hay tres demostraciones en el siguiente fragmento:

El primero muestra mix-blend-mode: multiply en acción.
Los otros dos comparan el efecto de mix-blend-mode: darken en dos diseños, con un bloque bg adicional y con el pseudo-elemento ::first-line .

https://codepen.io/glebkema/pen/NWapXPQ?editors=1100

 body { color: grey; } .width { width: 300px; padding: 5px; resize: horizontal; overflow: hidden; background: linear-gradient(45deg, yellow, black); background-repeat: repeat-x; background-size: 200px 100%; } .item2 { display: flex; justify-content: space-between; position: relative; mix-blend-mode: darken; gap: 10px; /* 3) */ } .multiply .item2 { mix-blend-mode: multiply; /* 1) */ } .item2::before { content: ''; position: absolute; top: 1em; left: 0; right: 0; border-bottom: 1px grey dotted; } .bg2 { background: white; position: relative; z-index: 1; } .price4, .text4 { z-index: 1; } .price4, .text4::first-line { /* 2) */ background: white; }

 <h4><code>mix-blend-mode: multiply;</code></h4> <div class="width multiply"> <div class=item2> <span class=text2> <span class=bg2> 2 Text text </span> </span> <span class=price2> <span class=bg2> $100 </span> </span> </div> <div class=item2> <span class=text2> <span class=bg2> 2 Text text text text text text text text text text text text text text text text text </span> </span> <span class=price2> <span class=bg2> $100 </span> </span> </div> <br /> <div class=item2> <span class=text4> 4 Text text </span> <span class=price4> $100 </span> </div> <div class=item2> <span class=text4> 4 Text text text text text text text text text text text text text text text text text </span> <span class=price4> $100 </span> </div> </div> <h4><code>mix-blend-mode: darken;</code> (2nd method before 4th)</h4> <div class="width"> <div class=item2> <span class=text2> <span class=bg2> 2 Text text </span> </span> <span class=price2> <span class=bg2> $100 </span> </span> </div> <div class=item2> <span class=text2> <span class=bg2> 2 Text text text text text text text text text text text text text text text text text </span> </span> <span class=price2> <span class=bg2> $100 </span> </span> </div> <br /> <div class=item2> <span class=text4> 4 Text text </span> <span class=price4> $100 </span> </div> <div class=item2> <span class=text4> 4 Text text text text text text text text text text text text text text text text text </span> <span class=price4> $100 </span> </div> </div> <h4><code>mix-blend-mode: darken;</code> (4th method before 2nd)</h4> <div class="width"> <div class=item2> <span class=text4> 4 Text text </span> <span class=price4> $100 </span> </div> <div class=item2> <span class=text4> 4 Text text text text text text text text text text text text text text text text text </span> <span class=price4> $100 </span> </div> <br /> <div class=item2> <span class=text2> <span class=bg2> 2 Text text </span> </span> <span class=price2> <span class=bg2> $100 </span> </span> </div> <div class=item2> <span class=text2> <span class=bg2> 2 Text text text text text text text text text text text text text text text text text </span> </span> <span class=price2> <span class=bg2> $100 </span> </span> </div> </div>

Answer 4 · 2022-03-03T18:33:03.086Z

Puede modificar la técnica 1 para mover la funcionalidad de punto del texto a otro lapso:

 <div class=item1> <span class=text1> Text </span> <span class=line1></span> <span class=price1> $100 </span> </div> <div class=item1> <span class=text1> Text text text text text text text text text text text text </span> <span class=line1></span> <span class=price1> $100 </span> </div> <div class=item1> <span class=text1> Text text text text text text text text text text text text </span> </div>

 .item1 { display: flex; } .line1 { flex-grow: 1; position: relative; overflow: hidden; } .line1::after { content: ''; position: absolute; bottom: 0; border-bottom: 1px dotted grey; width: 100%; } .price1 { align-self: flex-end; }

Esto funciona según lo previsto:

y un JSFiddle

Answer 5 · 2022-03-03T18:33:03.537Z

 .item1 { display: flex; font-size:32px; color:#808080; } .line1 { flex-grow: 1; position: relative; overflow: hidden; } .line1::after { content: ''; position: absolute; bottom: 0; border-bottom: 1px dotted #808080; width: 100%; } .price1 { align-self: flex-end; }

 <div class=item1> <span class=text1>Text text</span> <span class=line1></span> <span class=price1>$100</span> </div> <div class=item1> <span class=text1>Text text text text text text text text text</span> <span class=line1></span> <span class=price1>$100</span> </div> <div class=item1> <span class=text1>Text text text text text text text</span> </div>

0

268

Líderes de puntos CSS en la primera línea sobre un fondo complejo

5 answers

0

0

0

Tres mejoras para la segunda técnica

0

0

Find remote jobs

Andres GPT