2016-09-13 2 views
0

私はこれらの "auto fill in"ドットを最小の長さに設定する方法を理解しようとしています。画面のサイズが小さい場合は、アイテム間に1つまたは2つのドットしかないことがあります。このコードのドットに最小の長さを追加する方法はありますか?2つの要素の間のスペースを自動的に充填します。

http://codepen.io/Kseso/pen/fxrsL

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

答えて

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> 

は、あなたがこれは後に透明な背景を持つ空のスペースを追加します.blank-space-for-dots

widthを制御することにより、「点線」の最小幅を制御することができCSS

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

を追加しました.descripcionテキストが終了しました。

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