文字超长显示省略号展开收起

所属分类：其他,输入-杂项,自动完成

51982 484 查看评论 (26)

分享到微信朋友圈

查看演示立即下载

插件描述：此处使用的是 JQ 并没有使用CSS什么的文字超长自己限定字数，显示省略号展开收起都可以自定义

/*
				 * 插件名称是overTexts 
				 * 开发者：peyton
				 * QQ:625506370@QQ.COM
				 * 使用方法：1. $("you Dom ClassName or ID").overTexts({ texts:"you need overhide text...." });//这种的初始的，不带参数的，默认参数是 20字长 且显示展开和收起的
				 * texts: "测试文本...此处省略200字...测试文本",
				 * textLength: "20", //你需要定义超过多少字，就显示收起
				 * overText: "展开",  //你需要设置的默认名称，展开 显示
				 * openText: "收起",  //你需要设置的默认名称，收起 收缩
				 * ooType: "2" //展开和收缩的类型， 0 不显示展开和收缩，仅为省略号 || 1 显示展开，不显示收缩 ||2 显示展开和收缩 || 3显示省略号
				 * 
				 * */

使用方法

$(function() {
				$(".xo").overTexts({
					texts: '待我长发及腰，将军归来可好？此身君子意逍遥，怎料山河萧萧。天光乍破遇，暮雪白头老。寒剑默听奔雷，长枪独守空壕。醉卧沙场君莫笑，一夜吹彻画角。江南晚来客，红绳结发梢。待卿长发及腰，我必凯旋回朝。昔日纵马任逍遥，俱是少年英豪。东都霞色好，西湖烟波渺。执枪血战八方，誓守山河多娇。应有得胜归来日，与卿共度良宵。盼携手终老，愿与子同袍。',
					textLength: "40",
					overText: "展开",
					openText: "收起",
					ooType: "3" 					
				});
			});

如果不需要那么多参数的那种，你可以这样

$(function() {
				$(".xo").overTexts({
					texts: '待我长发及腰，将军归来可好？此身君子意逍遥，怎料山河萧萧。天光乍破遇，暮雪白头老。寒剑默听奔雷，长枪独守空壕。醉卧沙场君莫笑，一夜吹彻画角。江南晚来客，红绳结发梢。待卿长发及腰，我必凯旋回朝。昔日纵马任逍遥，俱是少年英豪。东都霞色好，西湖烟波渺。执枪血战八方，誓守山河多娇。应有得胜归来日，与卿共度良宵。盼携手终老，愿与子同袍。',
					textLength: "40",					
					ooType: "3" 					
				});
			});

祝好运！

基于bootstrap 的扁平风格的后台管理模板

文字轮播无缝滚动

Jquery 二维码美化（高度定制）

Jquery 二维码生成插件，高度定制

杂项

57924 428

导出table为excel

导出中文正常显示

杂项

71064 634

jQuery答题试卷并且评分

jQuery实现的测试答题功能

杂项

36265 412

向左滑动删除列表，动态添加列表

杂项

44235 403

讨论这个项目（26）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

nekooooo 0

2022/7/21 4:42:32

孙逸潇 0

2020/6/15 23:52:12

孙逸潇0

2020/6/16 0:35:55

啊我天忽略我这条疑问我刚才脑子断片辽…………………………

ricefoto 0

2019/11/29 11:34:45

秦大闪 0

2018/4/8 22:18:33

WckY 0

2017/10/17 16:22:17

<div class="demo">123456</div>
<div class="demo">测试专用</div>
<div class="demo">待我长发及腰，将军归来可好？此身君子意逍遥，怎料山河萧萧。天光乍破遇，暮雪白头老。寒剑默听奔雷，长枪独守空壕。醉卧沙场君莫笑，一夜吹彻画角。江南晚来客，红绳结发梢。待卿长发及腰，我必凯旋回朝。昔日纵马任逍遥，俱是少年英豪。东都霞色好，西湖烟波渺。执枪血战八方，誓守山河多娇。应有得胜归来日，与卿共度良宵。盼携手终老，愿与子同袍。</div>

<script>
    $(function() {
        $(".demo").overTexts({
            texts: $(this).html(),
            textLength: "40",
            overText: "展开",
            openText: "收起",
            ooType: "2"
        });
    });
</script>

确实在扩展性方面我觉得有点鸡肋比如我想先通过$(this).html()获取到静态数据即使我先each 也失败了可能我太菜了希望楼主或其他网友提供下思路或方法