html - anchor 标记文本从 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的宽度并在一行中显示链接。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>