Question

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

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

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

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

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

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

Answer 1

我们使用类似的，更通用的ellipsify，适用于大多数情况。我们还应用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/

<强>片段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用一点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 4

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

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

4 个答案: