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

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

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

text-overflow : clip | ellipsis 

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

overflow : visible | auto | hidden | scroll 


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

或者

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

});

温馨提示:内容为网友见解,仅供参考
第1个回答  2014-03-27

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

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

追问

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

追答

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

第2个回答  推荐于2017-09-06
<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);
        });
    });

 

本回答被提问者采纳

jquery控制字符串的长度,超过用...代替,鼠标移上去显示全部
overflow : visible | auto | hidden | scroll 除此之外,你可以写hover事件,或者$('#foo').bind({ mouseover:function(){...}, mouseout:function(){...} });

jquery处理列表中某字段过长的问题,先截取然后当鼠标移动到该单元格时...
jquery ui 有一个tooltip 控件,你只要把它应用到你的table上就行了 http:\/\/jqueryui.com\/tooltip\/#custom-style 例如:( 'table').tooltip();截断的内容

JQUERY多个DIV鼠标移入移出显示隐藏对应DIV
实现这种功能的jquery是相当简单的,list元素鼠标移入,当前元素里的 span显示;移出则相反,具体代码如下:(function(){\/\/鼠标移入$('.list').mouseenter(function(){\/\/这里使用mouseover也可以,使用mouseenter是防止冒泡(this).find('span').show();\/\/这里的show可以改成animate,toggle都可以});\/...

jq 求Jquery实现鼠标移上弹出提示框,移出消失(实现的再追加50分,一共1...
先把 “” 加上 然后在“欢迎提意见”那个里加上一个属性“title”,也就是 欢迎提意见 最后在mouseover的function里加上 (this).tooltip({ position: { my: "left top", at: "right+5 top-5" }});position 可自行做调整,css也可以添加,详细看jquery-ui tooltip ...

...鼠标悬停上去后以tip形式显示完整的内容,用jquery或者js实现?_百度...
这里面的内容你可以使用jstl函数标签进行判断然后截取要现实的部分 紧接着就是定一个 肯定是保证 input > id == li > 'hidden_' + id ('#id').mouseover(function(){ var id = $(this).attr('id');var hiddenId = 'hidden_' + id;(this).attr('title',$('#'+hiddenId).va...

使用jquery或者bootstrap如何写这种鼠标移入移出的特效
如果是向下的移动的话,jQuery就有现成的效果。需要向上的这种效果的话,就需要稍微复杂点了。这种也可以用css3的动画制作,关键就是你要理解,这个效果是如何实现的。鼠标移入前和移入的时候,页面的代码是怎么变的。一种方法就是,每个方块其实有2个,一个是你看到的,一个是高度为0在最底部的,...

JQuery 鼠标移到一个层上显示另一个层问题
你好!第一个问题解决思路:每个一级菜单设置hover事件没有问题,但是你的代码中显示的二级菜单却成为了全局所有的了,所以需要修改为当前一级菜单下面的$(".subCategory")元素,即 $(一级菜单).find(".subCategory")--->>> 这样才会显示为当前一级菜单下的二级菜单。第二个问题解决思路:由于hover...

Jquery的show()和hide()的问题 目前是鼠标移入li则显示DIV,移除则隐藏...
jq有自带的显示隐藏函数,不用自定义,可以使用fadeToggle()函数实现淡入淡出效果。如:("#one").hover(function(){ $("#item").fadeToggle();});使用Jq函数,前提是要引入jquery库,即jquery.js

网页超链接title、alt标签,在页面上鼠标移上去会有提示文字,此文字要...
写个js代码,在页面dom加载完之后,去掉title和alt中的文字。如果用jquery的话 .(function(){ .("a").attr("title","");.("img").attr("alt","");})就全去掉了。

需要用jQuery 实现 在一个元素上鼠标移入延迟200毫秒触发事件,但是200不...
你好,我猜你要的效果是,但鼠标在元素上快速移入移出的时候不触发元素的mouseover事件,而当鼠标移入元素,并停留超过200毫秒,便触发某些方法。如果是这样,实现起来比较简单,看代码:(function() { var sq = document.getElementById('J_Square'); var _timer; sq.onmouseover = functio...

相似回答