javascript - 使用省略号 chop 文本也会 chop 工具提示

Question

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

<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());

Answer 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>