div多出文字隐藏并用省略号代替
程序员文章站
2022-04-22 14:02:30
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
.box {
margin: 20px auto;
width: 300px;
}
.box li {
padding: 0 5px;
line-height: 35px;
border-bottom: 1px dashed #AAA;
cursor: pointer;
/*超出一行的内容自动裁切,以省略号代替*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.bgColor {
background-color: lightcyan;
}
</style>
</head>
<body>
<ul class="box" id="box">
<li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
<li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
<li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
<li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
<li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
</ul>
<script src="js/changeColor.js"></script>
</body>
</html>
上一篇： css实现超出文本溢出用省略号代替