html - Ellipses across spanning rows -
i'm trying create rows there ellipsis end of left cell start of text of right cell. issue length of left cell varies , length of right cell varies. i've tried aligning 2 divs , ending right div overflow: ellipsis , starting right div ellipsis don't know how figure out how many dots should added prior start of right text.
for example:
property 1......................................value 1
some property 2.................some value 2
you may use flex
, order
, pseudo draw dots
.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;/* may tune */ } body { padding-top:50px; /* demo snippet in way */ }
<p class="ellipsis"><!-- other tag li or div too, css styling --> <span>ellipsis in</span> <span>between</span> </p>
Comments
Post a Comment