如何在包装文本后将div拉伸到可用宽度？

Question

我需要一个下划线，在一些包装文本后占用所有剩余的宽度。所有这些都在表格单元格中。

这就是我想要的：

当然，如果文本换行不同（由于调整大小等），下划线宽度必须相应地改变。

它显示了什么：

我的代码是：

.uln {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: inline-block;
}

<table style="width:220px; text-align:justify">
  <tr>
    <td>
      <span>this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text.</span>
      <div class="uln">&nbsp;</div>
    </td>
  </tr>
</table>

Answer 1

您可以添加全长的下划线并在该行上绘制文本，以便将其隐藏在文本所在的位置。

＆＃13;

＆＃13;

.with-blank {
  position: relative;
}

.with-blank::before {
  content: '';
  position: absolute;
  bottom: 2px;
  border-bottom: 1px solid #000;
  width: 100%;
}

.with-blank span {
  z-index: 2;
  background: #fff;
  position: relative;
  padding: 0px 5px 0px 0px;
}

＆＃13;

<table style="width:220px; text-align:justify">
  <tr>
    <td class="with-blank">
      <span>this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text.</span>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

td {
  position: relative;
}

span {
  background-color: #FFF;
}

.uln {
  position: absolute;
  display: inline-block;
  width: 100%;
  bottom: 4px;
  left: 0;
  z-index: -1;
  border-bottom: 1px solid #000;
}

<table style="width:220px; text-align:justify">
  <tr>
    <td>
      <span>this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text. this is a very long text.</span>
      <div class="uln">&nbsp;</div>
    </td>
  </tr>
</table>