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实现超出一定字数隐藏并用省略号"..."代替,点击后又可进行展开和收起,的更多相关文章
- CSS控制文本超出后隐藏并用省略号代替
一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...
- css 文本换行 文本溢出隐藏用省略号表示剩下内容
正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...
- js实现多行文本超出一定字数显示省略号功能
最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
- css 实现文本换行及显示不下隐藏显示省略号
CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html 今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...
- css怎样让HTML中超出的内容显示为省略号
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法第一种.用程序开截取字符长度,这个其实也是可以的.第二种就是接下来分享的内容,用css样式来做,话也 ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- Javascript: 截取字符串多出来并用省略号[...]显示
/背景知识/ substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数描述 start 必需.一个非负的整数 ...
随机推荐
- 学习MVC之租房网站(二)-框架搭建及准备工作
在上一篇<学习MVC之租房网站(一)-项目概况>中,确定了UI+Service的“双层”架构,并据此建立了项目 接下来要编写Common类库.配置AdminWeb和FrontWeb 一.编 ...
- Entity Framework快速入门--IQueryable与IEnumberable的区别
IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...
- (转)混乱的First、Follow、Firstvt和Lastvt
转自: http://dongtq2010.blog.163.com/blog/static/1750224812011520113332714/ 学编译原理的时候,印象最深的莫过于这四个集合了,而且 ...
- 【react学习】关于react框架使用的一些细节要点的思考
( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的) 这篇文章主要是写关于学习react中的一些自己的思考: 1.set ...
- 新手介绍简单一下iOS开发中几种界面传值
首先在处理iOS-UI中,也许在很多地方需要用到两种甚至多种不同界面之间的传值,相比这也是很多iOS入门成员头疼问题,同样作为新手的我在接触这类传值时候也一脸懵然,经过一段时间的研究,对于简单的传值有 ...
- HTTP 协议
HTTP 协议对应 Web 开发者来说都必须要了解的,无论技术背景或首选编程语言是什么,"请求-响应" 对话是驱动 Web 上通信的基础. HTTP 概述 HTTP 协议是 Hyp ...
- CF CROC 2016 Intellectual Inquiry
题目链接:http://codeforces.com/contest/655/problem/E 大意是Bessie只会英文字母表中的前k种字母,现在有一个长度为m+n的字母序列,Bessie已经知道 ...
- java入门基础
什么是java? java是一门编程语言 编程语言有很多种 你比如 C语言 等等 为什么学习java呢! 因为你要和计算机交互 当然了你用汉语跟她说她听不懂 所以你要学习编程语言 那么额咱们的ja ...
- php学习之重要内置函数
1. require_once()函数 此函数在脚本执行期间包含并执行指定的文件,与require语句类似,唯一区别是如果该文件中的代码已经被包含了,则不会再次包含. require_once()函数 ...
- 微信小程序开发流程
2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线,一夜之间,小程序可谓家喻户晓,但通过接下来的几个月的观察,微信小程序并没有想象中的那么火爆.进入4月以来,微信小程序团队进行 ...