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

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

1 个答案: