5

省略記号を使用してテキストを切り捨て、テキスト全体をツールチップに表示しています。テキストがオーバーフローした場合、ツール ヒントのみが表示されます。ツールチップは 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());
4

1 に答える 1

0

要素に別のクラス名を付けてから、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>

于 2018-10-31T14:24:47.007 に答える