- A+
所属分类:Web前端
js实现文字超出省略号显示时长按显示全部
元素内容超出省略号显示时长按该元素,生成toast弹窗(id:toolkitContainer),以显示全部内容
#toolkitContainer { max-width: 150px; position: absolute; z-index: 999; background-color: #f6f6f6; border-radius: 5px; color: #000; padding: 5px 15px; border: solid 1px #ddd; opacity: .95; font-size: 12px; }
window.onload = () => { initListener(); //调用 $('td').each(function() { if($(this).width() < $(this).text().length * 14) { $(this).addClass('toolkit'); } }); }; //字浮动显示逻辑 var initListener = function() { $('body').on('touchstart', '.toolkit', function(e) { var toolkit = $('#toolkitContainer'); var body = $('body'); var _this = $(this); if(toolkit.length == 0) { toolkit = $('<div></div>').attr('id', 'toolkitContainer') .appendTo($('body')); } _this.on('touchend', function() { $('#toolkitContainer').remove(); _this.off('touchend'); _this.off('touchcancel'); }); _this.on('touchcancel', function() { $('#toolkitContainer').remove(); _this.off('touchend'); _this.off('touchcancel'); }); toolkit.html($(this).attr('tText') || $(this).html()); if(!toolkit.html()) { return; } var tx = e.originalEvent.touches[0].pageX - toolkit.width() / 2; tx = tx < 0 ? 0 : tx; tx = tx + toolkit.width() > body.width() ? tx - toolkit.width() : tx; var ty = e.originalEvent.touches[0].pageY - toolkit.height() - 30; ty = ty < 0 ? 0 : ty; toolkit.css('top', ty + 'px'); toolkit.css('left', tx + 'px'); toolkit.css('opcaity', '0.2'); toolkit.show(); toolkit.animate({ opcaity: 1 }, 300); }); };