Ellipsen überspannende Zeilen

Question

Ich versuche, Zeilen zu erstellen, in denen Ellipsen vom Ende der linken Zelle bis zum Anfang des Textes der rechten Zelle vorhanden sind. Das Problem ist, dass die Länge der linken Zelle variiert und die Länge der rechten Zelle ebenfalls variiert. Ich habe versucht, indem Sie 2 divs ausrichten und dann das rechte div mit Überlauf beenden: Ellipse und dann das rechte div mit Ellipse beginnend, aber ich weiß nicht, wie man vor dem Anfang des richtigen Textes wie viele Punkte addiert werden sollte.

Zum Beispiel:

Eigenschaft 1 ..................................... .Wert 1

Einige 2 Immobilien ................. Einige Wert 2

Answer 1

können Sie verwenden flex, order und ein Pseudo die Punkte zu zeichnen

.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

Sie können dies mit einem Pseudo-Element und einem Hinweis auf flexbox tun.

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>