css超过宽度显示点点点
效果
展开
image.png
收起
image.png
复制即可使用
Documentdiv {
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;
}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
展开
$('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'
})
}
}
})