在div框的流上方錨定標記文本

Question

<div>
    <ul>
        <li><a href="#">Test_link_is_soooo_long</a></li>
    </ul>
</div>

<style>
div {
    border: 2px solid rgba(0,0,0,0.1);
    width: 150px;
}
a {
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

鏈接文本超出邊界，我想修復它。 但沒有任何解決方案。

以上代碼的結果

我如何解決這個問題。

Answer 1

如果您不想增加div的寬度並將鏈接顯示在一行中，請使用文本省略號.with之外的部分將顯示為三個點

 div { border: 2px solid rgba(0,0,0,0.1); width: 150px; } a { width: 100px; display:inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

 <div> <ul> <li><a href="#">Test_link_is_soooo_long</a></li> </ul> </div>