Question

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

例如：

财产1 ......................................价值1

一些财产2 .................一些价值2

Answer 1

您可以使用flex，order和伪点来绘制点

＆＃13;

.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 */
  }

＆＃13;

<p class="ellipsis"><!-- any other tag as li or div does too, CSS does the styling -->
    <span>ellipsis in</span>
    <span>between</span>
  </p>

＆＃13;

Answer 2

你可以使用伪元素和一些flexbox来做到这一点。

＆＃13;

ul {
  list-style-type: none;
  width: 80%;
  margin: auto;
  padding: 0;
}
.list {
  display: flex;
}
.first {
  margin-right: 0.5em;
  flex: 1;
  display: flex;
}
.price {
  text-align: right;
  flex: 0 0 4em;
}
.first:after {
  content: '';
  border-bottom: dotted 1px black;
  flex: 1;
}

＆＃13;

<ul>
  <li class="list">
    <i class='first'>Co-Pay:</i>
    <i class="price">$150.00</i> 
  </li>
  <li class="list">
    <i class='first'>Pay:</i>
    <i class="price"> $5.00</i> 
  </li>
  <li class="list">
    <i class='first'>Co-Pay: item</i>
    <i class="price"> $15.00</i> 
  </li>
  <li class="list">
    <i class='first'>Co-Pay: great deal</i>
    <i class="price"> $1.00</i> 
  </li>
</ul>

＆＃13;

跨越行的省略号

2 个答案: