jquery - 文本溢出时在标题中显示内容

Question

CSS3 介绍 text-overflow这样您就可以 overflow hidden 的文本，甚至可以添加省略号。

如果文本溢出并隐藏，我想在悬停时将其显示为工具提示。

最简单的方法是将文本添加到元素的 title 属性中。然而，这将使文本显示它是否溢出。

我只想在溢出时显示工具提示。

所以如果我有这个:

<span>some text here</span>
<span>some more text here</span>

它呈现如下:

some text here

some more...

第一个将没有工具提示，因为没有必要，第二个将有一个工具提示显示:

some more text here

有什么办法可以设置吗？

Answer 1

单靠 CSS 无法做到这一点，我认为任何 Javascript 解决方案都将取决于 HTML 的结构。但是，如果您的 HTML 结构如下:

<div id="foo">
  <span class="bar">Lorem ipsum dolor sit amet, consectetur.</span>
  <span class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>

#foo 元素有你的 text-overflow 声明，而 bar 类有一个 white-space: nowrap 声明。你应该能够使用 jQuery 做这样的事情:

var foo = $("#foo");
var max_width = foo.width();
foo.children().each(function() {
  var $this = $(this);
  if ($this.width() > max_width) {
    $this.attr("title", $this.text());
  }
});

参见:http://jsbin.com/alepa3