Fill the rest of the element with text content

Question

I want to fill the rest of the element with dots. This is a characteristics list. Left is name of characteristic and right is its value. You can see what I want to achieve in this picture.

The width of the container is not known beforehand.

The markup will be looking something like this

<div class="characteristics_table">
    <div class="col-md-8">Name  </div>
    <div class="col-md-4">Value  </div>
</div>

Is it possible to make it with pure CSS or I should use JS?

see this post http://stackoverflow.com/questions/5476673/css-justify-text-fill-space-with-dots — chungtinhlakho, Jun 15 '16 at 04:15
Possible duplicate of http://stackoverflow.com/questions/4898287/how-to-display-text-a-dotted-line-then-more-text-spanning-the-width-of-the-page/28629080#28629080 — Harry, Jun 15 '16 at 04:15

Pratikshya · Answer 1 · 2016-06-15T04:31:49.060

This is achievable by pure CSS only.

HTML

 <ul class="middle-dot leaders">
 <li>
 <span>Salmon Ravioli</span> <span>7.95</span>
 </li>
 <li><span>Fried Calamari</span> <span>8.95</span>
 </li>
 <li>
 <span>Almond Prawn Cocktail</span> <span>7.95</span>
 </li>
 <li>
 <span>Bruschetta</span> <span>5.25</span>
 </li>
 <li>
 <span>Margherita Pizza</span> <span>10.95</span>
 </li>
 </ul>

CSS

ul.leaders {
max-width: 38em;
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;}

ul.leaders li {
clear: both;}

li:before {
content: "· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·  · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ";}

ul.leaders span:first-child {
padding-right: 0.33em;
background: white;}

ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white;}

Source https://www.w3.org/Style/Examples/007/leaders.en.html

Your CSS is wrong compared to your example and doesn't give the desired results (correcting it to the example does) — Rick Calder, Jun 15 '16 at 04:23
Nope https://jsfiddle.net/wf8xznf5/ why are you modifying the code in the example you're giving? — Rick Calder, Jun 15 '16 at 04:44

score 1 · Answer 2 · answered Jun 15 '16 at 04:23

Here is the code snippet for for your question Rulisp.

.col-xs-8 {overflow: hidden; white-space: nowrap }
.col-xs-4 {overflow: hidden; }

.col-xs-8:after { content: " .................................................................................................." }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="characteristics_table">
    <div class="col-xs-8">Name goes here  </div>
    <div class="col-xs-4">Value  </div>
</div>
<div class="characteristics_table">
    <div class="col-xs-8">Name wil be here  </div>
    <div class="col-xs-4">Value  </div>
</div>
<div class="characteristics_table">
    <div class="col-xs-8">Name  </div>
    <div class="col-xs-4">Value  </div>
</div>

score 1 · Accepted Answer · answered Jun 15 '16 at 04:24

Here is your answer in codepen It can be done using css

http://codepen.io/SESN/pen/pbboMw

HTML

<div class="container-fluid">
  <div class="row">
  <div class="characteristics_table">
    <div class="col-md-8">Name  </div>
    <div class="col-md-4">Value  </div>

    <div class="dot col-md-8">
      <span>Demo 1 </span>
      <div></div>
    </div>
    <div class="valDiv col-md-4">Demo Demo   </div>

    <div class="dot col-md-8">
      <span>Demo 1 </span>
      <div></div>
    </div>
    <div class="valDiv col-md-4">Demo Demo   </div>
</div>
  </div>
</div>

CSS

.dot { position: relative; }
.dot > span { background: white; position: relative: z-index: 1; padding-right: 5px; }
.dot > div { position: absolute; width: 100%; border: 1px dashed; margin-top: -10px; z-index: -1; }
.valDiv { padding-left: 25px;}

While coding, add proper class to everything. – SESN Jun 15 '16 at 04:31 — SESN, Jun 15 '16 at 04:31

Fill the rest of the element with text content

3 Answers3