css超过宽度显示点点点
效果
展开
image.png
收起
image.png
复制即可使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 1120px;
height: 20px;
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
padding-right: 36px;
word-break: break-all;
}
span {
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
color: #175199;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
<span>展开</span>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('span').on({
click: function () {
var txt = $(this).html();
if (txt == '展开') {
$(this).html('收起').css('position','inherit');
$('div').css({
'height': 'auto',
'white-space': 'normal'
})
} else {
$(this).html('展开').css('position','absolute');
$('div').css({
'height': '20px',
'white-space': 'nowrap'
})
}
}
})
</script>
</body>
</html>
网友评论