首页 > 代码库 > js实现超出一定字数隐藏并用省略号"..."代替,点击后又可进行展开和收起,
js实现超出一定字数隐藏并用省略号"..."代替,点击后又可进行展开和收起,
原来简单阐述:放两个一模一样的div,把你要展示的文字放进去。页面初始化的时候,第一个div展示,第二个
div隐藏,就是这么简单。(ps:可以直接复制代码到你自己项目中,查看效果)
样式部分(记得引用一下jquery,如果你喜欢手写原生的js当我没说)**********
<style> .ms-cont2{display: none;} .ms-cont2,.ms-cont1{cursor: pointer;} </style>
body部分**********
<div class="ms-cont1">{!! $v[‘content‘] !!}</div> <div class="ms-cont2">{!! $v[‘content‘] !!}</div>
js部分************
<script> function cutString(str, len) { //length属性读出来的汉字长度为1 if(str.length*2 <= len) { return str; } var strlen = 0; var s = ""; for(var i = 0;i < str.length; i++) { s = s + str.charAt(i); if (str.charCodeAt(i) > 128) { strlen = strlen + 2; if(strlen >= len){ return s.substring(0,s.length-1) + "..."; } } else { strlen = strlen + 1; if(strlen >= len){ return s.substring(0,s.length-2) + "..."; } } } return s; } //以上cutString方法借鉴参考了:http://www.jb51.net/article/91716.htm,万分感谢! $(document).ready(function(){ var cont1 = $(‘.ms-cont1‘), cont2 = $(‘.ms-cont2‘); cont1.click(function(){ $(this).hide().next().show(); }); cont2.click(function(){ $(this).hide().prev().show(); }) cont1.each(function(){ var that = $(this), txt = that.text(); // console.log(txt); that.text(cutString(txt,30)); }) }) </script>
前台页面截图展示**********
加载后的效果
点击后的效果
再次点击后
js实现超出一定字数隐藏并用省略号"..."代替,点击后又可进行展开和收起,
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。