使用省略号截断文本也会截断工具提示答案

【问题标题】：Truncate text using ellipsis also truncates the tooltip使用省略号截断文本也会截断工具提示
【发布时间】：2013-11-08 01:02:54
【问题描述】：

我正在使用省略号截断文本并在工具提示上显示整个文本。如果文本溢出，则仅显示工具提示。工具提示在 Chrome 中看起来不错，但在 IE 和 Firefox 中却不行。在 IE 中，工具提示文本也会被截断，而在 Firefox 中，工具提示本身会被截断。

<div class="card">
    <p>From:</p>
    <p> Dark Angel </p>
    <p class="ellipsis"> QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQAAAAAA
        New york, US<p>        
<div>

CSS：

.card {
    height:416px;
    width:280px;
    display:block;
    border: 1px solid black;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

jQuery:

$('p.ellipsis').bind('mouseenter', function () {
    var $this = $(this);

    if (this.offsetWidth < this.scrollWidth && !$this.attr('title'))
        $this.attr('title', $this.text());

【问题讨论】：

如果你的字符串有最大长度限制，然后如果超过了那么剪辑它会不会很好？
你是如何测试的？ This fiddle 在 Windows 7 下的所有最新浏览器中都能正常工作。
我正在测试 IE10，windows 8，它在 IE10 中不起作用。标题文本也用省略号截断。我希望整个文本都显示在标题中。
天哪，你是对的。它在 Windows 7 下的 IE10 中完全显示，但在 Windows 8 下的 IE10 中被截断。因此，是操作系统问题而不是浏览器问题。恐怕你没有太多机会让它发挥作用。

标签： javascript jquery html css

【解决方案1】：

你可以给元素一个不同的类名，然后用Javascript来更新它，设置相关的ellipsis类名，以及捕获当时的文本并存储为元素的数据属性，所以您可以稍后访问它。

请注意，我将 <p> 标记更改为具有类名 pre-ellipsis...

// add a data-title attribute with the original text, then modify the class list
// to remove pre-ellipsis and add ellipsis

$("p.pre-ellipsis").each(function() {
    var $this = $(this);
    $this.data("title", $this.text());
    $this.removeClass("pre-ellipsis").addClass("ellipsis");
});

// your original code, but modified to get the tooltip text from the data attribute
$("p.ellipsis").on("mouseenter", function () {
    var $this = $(this);
    if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
        $this.attr('title', $this.data("title"));
    }
});

.card {
    height:416px;
    width:280px;
    display:block;
    border: 1px solid black;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card">
<p>From:</p>
<p> Dark Angel </p>
<p class="pre-ellipsis"> QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQAAAAAA
New york, US<p>        
<div>

【讨论】：