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;