html css 文字超出宽度用省略号替代

html | 2019-09-13 10:02:39

html css ul li列表文字超出宽度用省略号替代的案例:

html代码:

<ul>
<li><a href="adf">1111111111111111111111111111111111111111111111</a></li>
<li><a href="adf">22222222222</a></li>
<li><a href="adf">333333333</a></li>
<li><a href="adf">44444444444</a></li>
<li><a href="adf">55555555</a></li>
<li><a href="adf">66666666666</a></li>
<li><a href="adf">66666666666</a></li>
<li><a href="adf">66666666666</a></li>
<li><a href="adf">66666666666</a></li>
</ul>


css代码

ul{
        color:#00A4E3;
        margin: 0px 0px 0px 5px;
        list-style-type:square;
        list-style-position: inside;
}
li{
        margin-top: 5px;
        color:#00A4E3;
        list-style-type:square;
        text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

主要就是ul中

list-style-position: inside;
和li中
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;







登录后即可回复 登录 | 注册
    
关注编程学问公众号