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

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -