スパニング行全体の楕円

Question

左のセルの終わりから右のセルのテキストの始まりまでの省略記号がある行を作成しようとしています。問題は、左のセルの長さが変化し、右のセルの長さも変化することです。私は2つのdivを整列させて、オーバーフローで右のdivを終了してみました：省略記号と右のdivを省略記号で開始しますが、右のテキストの開始前にいくつのドットを追加するべきか把握する方法はわかりません。

たとえば、

プロパティ1 ...................................... .VALUE 1

いくつかのプロパティ2 .................何らかの値2

Answer 1

あなたはflex、orderと疑似ドットを描画するために使用することができ

.ellipsis { 
 
    display:flex; 
 
} 
 
.ellipsis span { 
 
    order:2; 
 
} 
 
.ellipsis span:first-of-type { 
 
    order:0; 
 
} 
 
.ellipsis:before { 
 
    content:''; 
 
    display:inline-block;/* optionnal*/ 
 
    border-bottom:dotted 1px; 
 
    flex:1; 
 
    order:1; 
 
    margin:0 0.2em 0.25em;/* you may tune this */ 
 
} 
 
body { 
 
    padding-top:50px; /* demo snippet in the way */ 
 
    }

<p class="ellipsis"><!-- any other tag as li or div does too, CSS does the styling --> 
 
    <span>ellipsis in</span> 
 
    <span>between</span> 
 
    </p>

Answer 2

これは、擬似要素とフレックスボックスのヒントを使用して行うことができます。

ul { 
 
    list-style-type: none; 
 
    width: 80%; 
 
    margin: auto; 
 
    padding: 0; 
 
} 
 
.list { 
 
    display: flex; 
 
} 
 
.first { 
 
    margin-right: 0.5em; 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
.price { 
 
    text-align: right; 
 
    flex: 0 0 4em; 
 
} 
 
.first:after { 
 
    content: ''; 
 
    border-bottom: dotted 1px black; 
 
    flex: 1; 
 
}

<ul> 
 
    <li class="list"> 
 
    <i class='first'>Co-Pay:</i> 
 
    <i class="price">$150.00</i> 
 
    </li> 
 
    <li class="list"> 
 
    <i class='first'>Pay:</i> 
 
    <i class="price"> $5.00</i> 
 
    </li> 
 
    <li class="list"> 
 
    <i class='first'>Co-Pay: item</i> 
 
    <i class="price"> $15.00</i> 
 
    </li> 
 
    <li class="list"> 
 
    <i class='first'>Co-Pay: great deal</i> 
 
    <i class="price"> $1.00</i> 
 
    </li> 
 
</ul>