html - 跨行的椭圆

Question

我正在尝试创建从左侧单元格末尾到右​​侧单元格文本开头有省略号的行。问题是左侧单元格的长度不同，右侧单元格的长度也不同。我试过对齐 2 个 div，然后用 overflow: ellipsis 结束右边的 div，然后用省略号开始右边的 div，但我不知道如何计算出在正确文本开始之前应该添加多少个点。

例如:

属性 1 .....................................值 1

一些属性 2................一些值 2

Answer 1

您可以使用flex、order 和一个pseudo 来绘制点

.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>