css超出宽度省略,css超过宽度显示省略号（一行）完整版

css超过宽度显示点点点

效果

展开

image.png

收起

image.png

复制即可使用

Document

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;

}

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

展开

$('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'

})

}

}

})