Javascript HTML-如何仅在激活省略号时显示工具提示

我的页面中有一个动态数据跨度，带有

省略号

样式

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

我希望使用相同的内容添加到此元素工具提示，但我希望它仅在内容较长且省略号显示在屏幕上时才显示。

有什么办法吗？
当激活

省略号时，浏览器是否会引发事件

*浏览器：Internet Explorer
如果您想单独使用javascript执行此操作，我将执行以下操作。为span指定一个id属性（以便可以轻松地从DOM中检索），并将所有内容放在名为“content”的属性中：

<span id='myDataId' style='text-overflow: ellipsis; overflow : hidden;
 white-space: nowrap; width: 71;' content='{$myData}'>${myData}</span>

${myData}

然后，在javascript中，可以在将元素插入DOM后执行以下操作

var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute('content')
if(elemInnerText.length <= elemContent.length)
{
   document.getElementById("myDataId").setAttribute('title', elemContent); 
}

var elemInnerText，elemContent；
elemInnerText=document.getElementById（“myDataId”）.innerText；
elemContent=document.getElementById（“myDataId”）.getAttribute（“内容”）
if（elemInnerText.length这里有一种使用内置省略号设置的方法，并在Martin Smith的注释中添加
title
属性on-demand（带jQuery）：

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});

$（'.mightOverflow'）.bind（'mouseenter'，function（）{
var$this=$（this）；
if（this.offsetWidth
uosɐſ的答案基本上是正确的，但您可能不想在mouseenter事件中执行此操作。这将导致它在每次您将鼠标移到元素上时进行计算以确定是否需要此操作。除非元素的大小发生变化，否则没有理由执行此操作

最好在元素添加到DOM后立即调用此代码：

var $ele = $('#mightOverflow');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
    $ele.attr('title', $ele.text());

var$ele=$（'mightOverflow'）；
var ele=$ele.eq（0）；
if（元件偏移宽度<元件滚动宽度）
$ele.attr（'title'，$ele.text（））；

或者，如果您不知道确切的添加时间，那么在页面加载完成后调用该代码

如果需要使用多个元素来执行此操作，则可以将所有元素都赋予相同的类（例如“mightOverflow”），并使用此代码更新所有元素：

$('.mightOverflow').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr('title', $ele.text());
});

$（'.mightOverflow'）。每个（函数（）{
变量$ele=$（本）；
if（this.offsetWidth
我就是这么做的。大多数工具提示脚本要求您执行存储工具提示的函数。这是一个jQuery示例：

$.when($('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
})).done(function(){ 
   setupTooltip();
});

$.when（$（'*'）.filter（function（））{
返回$（this.css（'text-overflow'）=='省略号'；
}).each（函数（{
if（this.offsetWidth

如果不想检查省略号css，可以简化如下：

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
})).done(function(){ 
   setupTooltip();
});

$('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
});

$.when（$（'*'）.filter（function（））{
返回（this.offsetWidth

我有一个“when”选项，所以在所有标题更新之前，“setupTooltip”函数不会执行。用工具提示函数替换“setupTooltip”，用你想要检查的元素替换*如果你离开它，它将遍历所有元素

如果只想使用浏览器工具提示更新标题属性，可以简化如下操作：

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
})).done(function(){ 
   setupTooltip();
});

$('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
});

$（'*'）.filter（函数（）{
返回$（this.css（'text-overflow'）=='省略号'；
}).each（函数（{
if（this.offsetWidth

或不检查省略号：

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
});

$.when（$（'*'）.filter（function（））{
返回（this.offsetWidth
上述解决方案中没有一个对我有效，但我找到了一个很好的解决方案。人们犯的最大错误是在页面加载时在元素上声明了所有3个CSS属性。只有当且仅当你想要椭圆的跨度比其父元素宽时，你才能动态添加这些样式+工具提示

    $('table').each(function(){
        var content = $(this).find('span').text();
        var span = $(this).find('span');
        var td = $(this).find('td');
        var styles = {
            'text-overflow':'ellipsis',
            'white-space':'nowrap',
            'overflow':'hidden',
            'display':'block',
            'width': 'auto'
        };
        if (span.width() > td.width()){
            span.css(styles)
                .tooltip({
                trigger: 'hover',
                html: true,
                title: content,
                placement: 'bottom'
            });
        }
    });

我们需要检测是否确实应用了省略号，然后显示工具提示以显示全文。仅通过比较“
this.offsetWidth
”是不够的当元素几乎保持其内容，但宽度仅缺少一个或两个以上像素时，尤其是对于全宽中文/日文/韩文字符的文本

以下是一个例子：

我找到了一种改进省略号检测的方法：

比较“
this.offsetWidth
”首先，如果失败，继续步骤2

暂时将css样式切换为{'overflow'：'visible'，'white space'：'normal'，'word break'：'break all'}
让浏览器重新显示。如果发生换行，元素将扩展其高度，这也意味着需要省略号
恢复css样式
这是我的改进：
这是我的jQuery插件：

(function($) {
    'use strict';
    $.fn.tooltipOnOverflow = function() {
        $(this).on("mouseenter", function() {
            if (this.offsetWidth < this.scrollWidth) {
                $(this).attr('title', $(this).text());
            } else {
                $(this).removeAttr("title");
            }
        });
    };
})(jQuery);

编辑：

我已经为这个插件做了一个要点。
这是一个纯CSS解决方案，不需要jQuery。
它不会显示工具提示，只会在鼠标悬停时将内容扩展到其全长

如果您有被替换的内容，那么它非常有用。这样您就不必每次都运行jQuery函数

.might-overflow {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.might-overflow:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

我有一个CSS类，它决定了在哪里放置省略号。基于此，我做了以下工作（元素集可以不同，我编写这些元素集，在使用省略号的地方，当然它可以是一个单独的类选择器）：

你可以用另一个跨距环绕跨距，然后简单地测试原始/内部跨距的宽度是否大于新/外部跨距的宽度。请注意，我说可能——这大致是基于我的情况，我在跨距内有一个
span
.might-overflow {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.might-overflow:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

$(document).on('mouseover', 'input, td, th', function() {
    if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
        $(this).attr('title', $(this).val());
    }
});

CaseService.applyTooltip = function(selector) {
    angular.element(selector).on('mouseenter', function(){
        var td = $(this)
        var span = td.find('span');

        if (!span.attr('tooltip-computed')) {
            //compute just once
            span.attr('tooltip-computed','1');

            if (span.width() > td.width()){
                span.attr('data-toggle','tooltip');
                span.attr('data-placement','right');
                span.attr('title', span.html());
            }
        }
    });
}

$.fn.tooltipOnOverflow = function(options) {
    $(this).on("mouseenter", function() {
    if (this.offsetWidth < this.scrollWidth) {
        options = options || { placement: "auto"}
        options.title = $(this).text();
      $(this).tooltip(options);
      $(this).tooltip("show");
    } else {
      if ($(this).data("bs.tooltip")) {
        $tooltip.tooltip("hide");
        $tooltip.removeData("bs.tooltip");
      }
    }
  });
};

    $(document).on('mouseover', 'input, span', function() {
      var needEllipsis = $(this).css('text-overflow') && (this.offsetWidth < this.scrollWidth);
      var hasNotTitleAttr = typeof $(this).attr('title') === 'undefined';
      if (needEllipsis === true) {
          if(hasNotTitleAttr === true){
            $(this).attr('title', $(this).val());
          }
      }
      if(needEllipsis === false && hasNotTitleAttr == false){
        $(this).removeAttr('title');
      }
  });