ラップされたテキストの後に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>