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 必需.一个非负的整数 ...
随机推荐
- cocoapods安装好后repo换源
1.pod repo 然后会出现以下内容,如下是我已经换了之后的,而你的URL还是github的 master - Type: git (master) - URL: https://git.cod ...
- tmux配置
bind k selectp -U bind j selectp -D bind h selectp -L bind l selectp -R bind -r ^k resizep -U 5 bind ...
- C#Execl
using System.IO; using System.Text; namespace iLIS.Common { /// <summary> /// 生成Excel文档内容 /// ...
- 工资不高也要给自己放假 这几款APP估计你用得上
我是这样的一个人,我宁愿工资不高,只要给我足够的假期,那我就满足了.都说上班就是为了赚钱,但如果身体不好,赚再多的钱也是无福享受,所以建议各位,有机会的话,一定要抽出时间去旅游,去放松. 现在我们外出 ...
- final的用法
先来看一段代码 class Car extends Vehicle { public static void main (String[] args) { new C ...
- TP5常用命令符操作
ThinkPHP5常用命令符操作 1. 模块自动生成指令: 默认会读取应用目录application下面的build.php作为自动 生成的定义文件,如果你的定义文件位置不同,则需要使用 ...
- 简介vsftpd及搭建配置
一.简介 FTP(文件传输协议)全称是:Very Secure FTP Server. Vsftpd是linux类操作系统上运行的ftp服务器软件. vsftp提供三种登陆方式:1.匿名登录 2 ...
- Java基础之equals方法和"= ="的区别
==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...
- 记录——excel导出lua工具(python实现)
项目需要一个从excel导出lua配置表的工具,之前的工具是主程写的,效率极差,i7 CPU 一次全部导出要花掉1个多小时.匪夷所思的是,这么渣的效率,居然用了整整一年.当 然,中途有人反映效率差,主 ...
- MyEclipse9.0破解
http://www.cnblogs.com/liulanglang/archive/2011/11/15/2249702.html