Question

我有一个像“mouseenter我将被显示”的字符串分配给一个var。但是我想通过对话框或弹出信息只显示用户“mouseenter I will disp ...”和mouseenter上的整个文本。 string是动态的，它将在不同的场景中得到改变。也应该隐藏在mousedown对话框中。

修改

的javascript

var orignalData = 'i am complete text'
if(orignalData.length){
incompleteData = orignalData.substring(0,5)
incompleteData += '...'
alert(incompleteData)
}
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + incompleteData;

现在用户mouseenter上“我...”我希望显示一个显示整个事物的小弹出窗口，一旦用户从“我...”中删除鼠标，弹出窗口将被隐藏或删除。

Answer 1

也许我在这里有点太“有创意”，或者根本不理解 - 但事实上你不仅仅想要一个<div> text-overflow: ellipsis你动态地分配文字和提示（标题））至？如果您有<div>：

<div id="divID"></div>

和CSS：

#divID {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 50px;
    white-space: nowrap;
}

最后通过JS分配内容，你会得到想要的结果（我想）：

var originalData = 'i am complete text'
var div = document.getElementById('divID');
div.innerText = originalData;
div.title = originalData;

演示 - ＆gt;的 http://jsfiddle.net/2rvzn2qn/

Answer 2

我让我的jquery版本因为我告诉你，我不知道javascript语法。

首先，HTML：

<p class="text"></p>
<div id="dialog">
    <p></p>
</div>

然后JS：

$(document).ready(function () {
    var orignalData = 'i am complete text';

    if (orignalData.length) {
        var incompleteData = orignalData.substring(0,5);
        incompleteData += '...';
        $('.text').text(incompleteData);
    }

    $('.text').hover(function() {
        $('#dialog').dialog({
            modal: true,
            open: function() {
                $(this).html(orignalData);
            }
        });
    });
});

在我的fiddle示例中，没有对话框的css。我让你看到了

如何使用jquery在mouseenter上显示全文？

2 个答案: