javascript - 用文本内容填充元素的其余部分

Question

我想用点填充元素的其余部分。这是一个特征列表。左边是特征的名称，右边是它的值。您可以在这张图片中看到我想要实现的目标。

事先不知道容器的宽度。

标记看起来像这样

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

是否可以使用纯 CSS 或我应该使用 JS？

Answer 1

这是你在 codepen 中的答案它可以使用 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;}