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

链接文字超出边界，我想修复它。但是没有得到任何解决方案。

result of above code

我如何解决这个问题。

Answer 1

使用文本省略号。如果你不想增加div的宽度并在一行中显示链接。离开的部分将显示为三个点

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

{{1}}