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属性读出来的汉字长度为1if(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>

前台页面截图展示**********

加载后的效果

点击后的效果

再次点击后

转载于:https://www.cnblogs.com/qwgshare/p/6244012.html

js实现超出一定字数隐藏并用省略号...代替，点击后又可进行展开和收起，相关推荐

CSS中文本超出部分隐藏并用省略号代替
CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到,这种只需要css三行代码就可以实现首先先写好基本的结构 <div> <p>今天天气很好,适合出去玩耍,不要再打 ...
div多出文字隐藏并用省略号代替
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>ti ...
css设置文字单行隐藏和多行隐藏，并用省略号表示
文字单行隐藏首先要给它设定一个宽和高,对于文字超出部分进行隐藏,多余的部分用省略号来表示. li{width: 220px;height: 20px;white-space: nowrap; //让 ...
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
html文字...点击后全部显示,js 文字超出部分隐藏、点击显示更多示例
这篇文章主要为大家详细介绍了js 文字超出部分隐藏.点击显示更多示例,具有一定的参考价值,可以用来参考一下. 感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随512笔记的小编罗X来 ...
uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）
一.uni-app中,固定宽高,文字超出部分,隐藏并显示省略号. .topic_cont_text{padding: 30upx;colof: #999;background: #E1FFFF;max ...
html超出部分显示隐藏,CSS文字超出部分隐藏并显示省略号
下面是编程之家 jb51.cc 通过网络收集整理的代码片段.编程之家小编现在分享给大家,也给大家做个参考. 网站前端开发中 web 网页中文字超出了需要隐藏,并显示省略号这个在工作中很多时候都要用到, ...
html隐藏文字点击查看更多,js 文字超出部分隐藏、点击显示更多示例
感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. css: *{ padding: 0; margin: 0; } .text-hide{ ...
css 文本超出隐藏显示省略号
1.大部分浏览器这个就可以解决 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...

js实现超出一定字数隐藏并用省略号...代替，点击后又可进行展开和收起，

js实现超出一定字数隐藏并用省略号...代替，点击后又可进行展开和收起，相关推荐

最新文章

热门文章