<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.
how I fix this problem.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.