自動填充兩個元素之間的空間，最小長度？

我想弄清楚如何將這些「自動填充」點設置爲最小長度。當屏幕尺寸很小時，有時項目之間只有一個或兩個點。無論如何要在這段代碼中爲點添加最小長度？自動填充兩個元素之間的空間，最小長度？

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

來源

2016-09-13 AndrewLeonardi

我能夠使它發揮作用，但有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; 
}

可以通過控制.blank-space-for-dots

的width控制「虛線」的最小寬度這將添加的空的空間與之後的透明背景.descripcion文本結束。

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

來源

2016-09-14 02:28:34

自動填充兩個元素之間的空間，最小長度？

回答

相關問題