向带有文本溢出的元素添加标题属性：省略号

Question

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

我在文本列表上使用以下 CSS 规则：

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

正如预期的那样，任何超出列表的文本都将被截断，并在末尾放置一个省略号。

我只想为那些触发列表上

text-overflow

规则的列表项设置活动标题属性。 因此，您可以将鼠标悬停在任何被截断的文本上，并查看其全文的工具提示。

有些事情告诉我，这即使不是不可能，也是很困难的。 然而我很乐意被证明是错误的。 我最好寻找一种使用尽可能少的 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脚本。

这里是小提琴链接：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;
}

Answer 4

您可以使用一些 JavaScript 来测量是否存在溢出，并且仅在元素会溢出时添加

title

属性（如果它没有被截断）。

• 用样式限制内容。
• 将内容复制到具有相同宽度的隐藏测试元素中。
• 不要限制测试元素的换行，使其溢出。
• 比较高度。

$(".smart-overflow").each(function() {

  var elementToTest = $(this),
    contentToTest = $(this).text(),
    testElement = $("<div/>").css({
      position: "absolute",
      left: "-10000px",
      width: elementToTest.width() + "px"
    }).appendTo("body").text(contentToTest);

  if (testElement.height() > elementToTest.height()) {
    elementToTest.attr("title", contentToTest);
  }
});

.smart-overflow {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smart-overflow">
  short text
</div>
<div class="smart-overflow">
  short text
</div>
<div class="smart-overflow">
  Longer text; there should be a tooltip here.
</div>
<div class="smart-overflow">
  More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper,
  blandit facilisis magna gravida. Nulla a euismod turpis.
</div>
<div class="smart-overflow">
  More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper,
  blandit facilisis magna gravida. Nulla a euismod turpis.
</div>
<div class="smart-overflow">
  short text
</div>
<div class="smart-overflow">
  short text
</div>

_{这里使用 jQuery 是为了简洁，但当然不是必需的。}

Answer 5

另一个简单的解决方案。我使用具有 3 列等宽的 CSS 网格。如果列内容超过 100 像素，省略号可见。悬停时会显示全部内容。透明度为 1 的列的背景颜色与页面颜色相匹配，以隐藏重叠的内容。尝试一下 CSS 值来看看差异。

div {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
span:hover {
  overflow: visible;
  z-index: 9999;
  display: inline-table;
  background-color: rgba(255, 255, 255, 1);
  padding-right: 5px;
}

  <div>
    <span>Some longer text visible on hover</span>
    <span>Another longer text visible on hover</span>
    <span>Short text</span>
  </div>