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

link text goes outside border and i want to fix it. But not get any solution.

result of above code

how I fix this problem.

Answer 1

Use text ellipsis.if you dont want to increase the width of the div and display the link in a single line.The part going out of the with will be displayed as three dots

 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>