Question

我正在试图弄清楚如何将这些“自动填充”点设置为最小长度。当屏幕尺寸很小时，项目之间只有一个或两个点。无论如何要在此代码中为点添加最小长度？

<p>
  <span class='descripcion'>Trócola</span>
  <span class='precio'>56´72</span>
</p>
<p>
  <span class='descripcion'>Junta la trócola</span>
  <span class='precio'>0´33</span>
</p>
<p>
  <span class='descripcion'>Gamusinos en oferta c/u</span>
  <span class='precio'>6´47</span>
</p>
<p>
  <span class='descripcion'>Saco de rafia y linterna a pedales</span>
  <span class='precio'>12´64</span>
</p>
<p>
  <span class='descripcion'>Jaula de bambú con led para gamusinos</span>
  <span class='precio'>21´99</span>
</p>
<p>
  <span class='descripcion'>Otro concepto más repartido entre más de una, o de dos, o de tres líneas de texto y así ver cómo se comporta en esta situación</span>
  <span class='precio'>1.694´99</span>
</p>
<p>
  <span class='descripcion'>Chismes y achiperres surtidos</span>
  <span class='precio'>c/u 0´10</span>
</p>
<p>
  <span class='descripcion'>Yugo, barzón, cavijal y mancera</span>
  <span class='precio'>33´74</span>
</p>
<p>
  <span class='descripcion'>Coyunda, sobeo, ramales y cordel</span>
  <span class='precio'>125´87</span>
</p>
<p>
  <span class='descripcion'>Media, cuartilla, celemín y 1 envuelza</span>
  <span class='precio'>48´04</span>
</p>






* {margin:0;padding:0;border: 0 none;position: relative;}
html, body {
  background: #7658F9;
  padding-top: 1rem;
  font-family: muli;
  font-weight: 300;
  font-style: italic;
}
p {
  background: inherit;
  width: 70%;
  max-width: 40rem;
  min-width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: #fff;
  padding-right: 4rem;
  margin-bottom: .5rem;
}
p:before {
  content: '';
  position: absolute;
  bottom: .4rem;
  width: 100%;
  height: 0;
  line-height: 0;
  border-bottom: 2px dotted #ddd;
}
.descripcion {
  background: inherit;
  display: inline;
  z-index: 1;
  padding-right: .2rem;
}
.precio {
  background: inherit;
  position: absolute;
  min-width: 4rem;
  bottom: 0;
  right: 0;
  padding-left: .2rem;
  text-align: right;
  z-index: 2;
}
.precio:after {
  content: '€';
}
h1 a {
  display: block;
  text-decoration: none;
  color: rgba(0,0,0,.55);
  margin-bottom: 1rem;
  text-align: center;
  transition: .5s;
}
h1 a:hover {
  color:  rgba(0,0,0,.3);
  letter-spacing: 2px;
}

Answer 1

我能够使其工作，但HTML结构发生了变化。

<p>
  <span class="description-wrapper">
      <span class='descripcion'>Otro concepto más repartido entre más de una, o de dos, o de tres líneas de texto y así ver cómo se comporta en esta situación</span>
      <span class="blank-space-for-dots"></span>
  </span>
  <span class='precio'>1.694´99</span>
</p>

添加了CSS

/* added style */
.descripcion {
  background-color: #7658F9;
}
.blank-space-for-dots {
  width: 50px;
  display: inline-block;
}

您可以通过控制width的{{1}}

来控制“虚线”的最小宽度

在.blank-space-for-dots文字结束后，这将添加一个透明背景的空白空间。

https://codepen.io/jacobgoh101/pen/kkPqmO

自动填充两个元素之间的空间，最小长度？

1 个答案: