为具有文本溢出的元素添加title属性:省略号

Question

我不确定这是否容易实现,但我想我会问以防万一:

我在文本列表中使用以下CSS规则:

{ 
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

正如所料,任何超出列表的文本都将被截断并在末尾放置省略号.

我希望只有那些触发text-overflow列表规则的列表项有一个活动的title属性.因此,您可以将鼠标悬停在任何截断的文本上,并查看其全文的工具提示.

有些东西告诉我这很难,如果不是不可能的话.但是,我希望被证明是错的.我最好寻找一种尽可能少使用JavaScript的解决方案.

Answer 1

我们使用类似的,更通用的椭圆化,适用于大多数情况.我们还应用title属性(适用于所有元素).如果元素椭圆化,则仅应用标题确实很困难.下面的示例假设,如果元素的宽度与父元素相同,则应设置标题.如果没有if语句,它将始终应用标题.

document.querySelectorAll('.ellipsify').forEach(function (elem) {
  if (parseFloat(window.getComputedStyle(elem).width) === parseFloat(window.getComputedStyle(elem.parentElement).width)) {
    elem.setAttribute('title', elem.textContent);
  }
});

.ellipsify {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;  
}

div {
  width: 100px;
}

<div>
  <span class="ellipsify">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>
  <span class="ellipsify">dolor sit amet</span>
</div>

Answer 2

这就是我接近解决方案的方式.

如果你不想使用java-script.

这是一个小提琴的链接:https://jsfiddle.net/fryc4j52/1/

片段:

.ellipse{ 
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin:0;
    padding:0;
}
.content li{
    margin:0;
    padding:0;
    overflow:hidden;
}
.ellipse:hover{
  width: auto;
  border: 2px solid #eee;
  box-shadow: 0px 3px 10px 0px black;
  padding:2px;
  white-space: normal;
  word-break: break-word;
  z-index:5;
}

<ul class="content">
    <li class="ellipse">A very looooooooooooooooooooooooooooooooooooooong line.</li>
    <li> Other text</li>
    <li class="ellipse">A veryvvvvvvvvvvvvvvvvvvvvvvverrrrryyyyyyyyy looooooooooooooooooooooooooooooooooooooong line.</li>
</ul>

Answer 3

    document.querySelectorAll('.ellipsis').forEach(function (e) {
        if (e.offsetWidth < e.scrollWidth) {
            e.setAttribute('title', e.textContent);
        } else{
            e.removeAttribute('title');
        }
    });

.ellipsis {
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}