js实现长按显示全部内容

• 2020 年 11 月 27 日
• 笔记
• Jquery, js, 文字超出, 显示全部

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);
   });
};