Question

jquery控制字符串的长度，超过用...代替，鼠标移上去显示全部

<div>百度一下，就知道了</div>
用jquery只显示4个文字，多余的用...代替，如 百度一下... ，如果鼠标移上去可以看到全部

Answer 1

关键的属性是：text-overflow和overflow： 

text-overflow : clip | ellipsis 

参数： 
clip : 　不显示省略标记（...），而是简单的裁切 
ellipsis : 　当对象内文本溢出时显示省略标记（...） 
说明： 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 

overflow : visible | auto | hidden | scroll 


除此之外，你可以写hover事件，

或者

$('#foo').bind({
 mouseover:function(){...},  
  mouseout:function(){...}  

});

Answer 2

不用这么复杂的，纯css就能实现的，要想让显示的文字部分少一点的话，改width就行，代码如下：

<div style="width:120px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="今天努力奋斗，是因为曾经吹下的牛比。">今天努力奋斗，是因为曾经吹下的牛比。</div>

追问

我的文字是动态的，从数据库里面取出的新闻标题，都是动态显示在表格中的，如果标题超过10个字符就用...代替多余的，鼠标移上去就显示全部，不超过10个字符的就正常显示，

追答

代码太多贴不上来,直接发文件吧

Answer 3

<div>百度一下... </div>
$("div").hover(function () {
$("div").html("百度一下，就知道了");
});

追问

DIV里的字符是动态的，从数据库里面取出来的

追答

var Title = "";
    $(function () {
        $.ajax({
            type: "POST",
            url: "@Url.Action("QryNewsInfo001", "COMB")",
            async: false,
            dataType: "json",
            success: function (data) {
                //比如你读数据库 返回出一个新闻标题
                Title = data.Title
            }
            });
        $("div").mouseover(function () {
            $("div").html(Title);
        });
        $("div").mouseout(function () {
            var sTitle = Title;
            if (sTitle.length > 10) { sTitle = sTitle .substring(0,10)+"..."}
            $("div").html(sTitle);
        });
    });