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

Question

CSS3引入,text-overflow因此您可以隐藏溢出的文本甚至添加省略号.

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

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

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

所以,如果我有这个:

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

它呈现如下:

这里有一些文字

多一点...

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

这里还有一些文字

有没有办法设置它？

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