如何在包裝文本後將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

你可以在全長添加下劃線和油漆過該行的文本，以便它隱藏在文本所在的位置。

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

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

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>