html - 价目表价格和产品之间的动态宽度虚线下划线

Question

我想制作一个价目表，在价格和产品之间用虚线下划线，宽度是动态的。我已经编写了这个 -

https://jsfiddle.net/romariokbn/2gm27rv6/

<ul class="how-can-i-do">
   <li>
     <span>Price</span>
     <span>15 000 Р</span>
   </li>
   <li>
      <span>Big text price</span>
      <span> 3000 Р</span>
   </li>
</ul>

但是当我在正确的文本中有空格时它不起作用。

Answer 1

使用 white-space: nowrap; 用于 ul.how-can-i-do-that-bitch li span + span

ul.how-can-i-do-that-bitch {
    padding: 0;
  width: 293px;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 30px;
}

ul.how-can-i-do-that-bitch li {
    display: table;
}

ul.how-can-i-do-that-bitch li span {
   display:     table-cell;
  color: #1e1e1e;
}

ul.how-can-i-do-that-bitch li span:first-child {
  position: relative;
  font-size: 15px;
  color: #949494;
  overflow: hidden ;  
} 
ul.how-can-i-do-that-bitch li span:first-child:after{
  content:        "";
  position:       absolute;
  bottom:         0.5em;       
  margin-left:    0.5em ;      
  width:          100%;
  border-bottom:  1px dashed red ; 
}  

ul.how-can-i-do-that-bitch li span + span {
  text-align:     right;
  width:          1%   ;       /* Trick it */
  vertical-align: bottom ;     /* Keep Price text bottom-aligned */
  padding-left:   0.5em  ;
  white-space: nowrap;
}

<ul class="how-can-i-do-that-bitch">
<li>
  <span>Peice</span>
  <span>15000Р</span>
</li>
<li>
  <span>Big text price</span>
  <span> 3000Р</span>
</li>
</ul>


<ul class="how-can-i-do-that-bitch">
<li>
  <span>Price</span>
  <span>15 000 Р</span>
</li>
<li>
  <span>Big text price</span>
  <span> 3000 Р</span>
</li>
</ul>