我有一个跨度与动态数据在我的页面，与省略号风格。
.my-class
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 71px;
}
<span id="myId" class="my-class"></span>
document.getElementById('myId').innerText = "...";我想在这个元素的工具提示中添加相同的内容，但我希望它只在内容较长且省略号出现在屏幕上时才会出现。 有什么办法可以做到吗? 当省略号被激活时，浏览器是否抛出一个事件?
*浏览器:Internet Explorer
当前回答
这是一个纯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;
}
其他回答
下面是一种使用内置省略号设置的方法，并根据Martin Smith的注释按需添加title属性(使用jQuery):
$('.mightOverflow').bind('mouseenter', function(){
var $this = $(this);
if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
$this.attr('title', $this.text());
}
});
这是一个香草JavaScript解决方案:
var cells = document.getElementsByClassName("cell"); for(const cell of cells) { cell.addEventListener('mouseenter', setTitleIfNecessary, false); } function setTitleIfNecessary() { if(this.offsetWidth < this.scrollWidth) { this.setAttribute('title', this.innerHTML); } } .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px; border-style: solid; width: 120px; } <div class="cell">hello world!</div> <div class="cell">hello mars! kind regards, world</div>
下面是另外两个纯CSS解决方案:
在适当的位置显示截短的文本:
.overflow { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .overflow:hover { overflow: visible; } .overflow:hover span { position: relative; background-color: white; box-shadow: 0 0 4px 0 black; border-radius: 1px; } <div> <span class="overflow" style="float: left; width: 50px"> <span>Long text that might overflow.</span> </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis. </div>
显示任意的“工具提示”:
.wrap { position: relative; } .overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events:none; } .overflow:after { content:""; display: block; position: absolute; top: 0; right: 0; width: 20px; height: 15px; z-index: 1; border: 1px solid red; /* for visualization only */ pointer-events:initial; } .overflow:hover:after{ cursor: pointer; } .tooltip { /* visibility: hidden; */ display: none; position: absolute; top: 10; left: 0; background-color: #fff; padding: 10px; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.5s ease; } .overflow:hover + .tooltip { /*visibility: visible; */ display: initial; transition: opacity 0.5s ease; opacity: 1; } <div> <span class="wrap"> <span class="overflow" style="float: left; width: 50px">Long text that might overflow</span> <span class='tooltip'>Long text that might overflow.</span> </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis. </div>
您可以用另一个跨度包围这个跨度，然后简单地测试原始/内跨度的宽度是否大于新/外跨度的宽度。注意，我说可能——这大致是基于我的情况，我在td中有一个张成空间，所以我实际上不知道它是否适用于张成空间中的张成空间。
以下是我对那些可能与我处境相似的人的建议:我只是不加修改地复制/粘贴它，即使它是在Angular环境中，我不认为这会降低可读性和基本概念。我将其编码为一个服务方法，因为我需要在多个地方应用它。我一直传递的选择器是一个类选择器，它将匹配多个实例。
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());
}
}
});
}
这是我的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);
用法:
$("td, th").tooltipOnOverflow();
编辑:
我已经为这个插件做了一个要点。 https://gist.github.com/UziTech/d45102cdffb1039d4415
