原理简单阐述:放两个一模一样的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实现超出一定字数隐藏并用省略号"..."代替,点击后又可进行展开和收起,的更多相关文章

  1. CSS控制文本超出后隐藏并用省略号代替

    一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...

  2. css 文本换行 文本溢出隐藏用省略号表示剩下内容

    正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...

  3. js实现多行文本超出一定字数显示省略号功能

    最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...

  4. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  5. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  6. css 实现文本换行及显示不下隐藏显示省略号

    CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html   今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...

  7. css怎样让HTML中超出的内容显示为省略号

    文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法第一种.用程序开截取字符长度,这个其实也是可以的.第二种就是接下来分享的内容,用css样式来做,话也 ...

  8. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  9. Javascript: 截取字符串多出来并用省略号[...]显示

    /背景知识/ substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数描述 start 必需.一个非负的整数 ...

随机推荐

  1. 从零开始用 Flask 搭建一个网站(一)

    前言 笔者之前未接触过 Python,只是略懂一点前端,所以说从零开始也相差无几吧.Flask 是一个轻量级的基于 Python 的框架,但是扩展性非常良好(Github 上 22000 多个 sta ...

  2. 最小函数值 洛谷P2085

    题目描述:          有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个( ...

  3. 关于苹果真机 getFullYear()返回值为NAN的问题

    问题描述: 在html页面中获得后台传过来的一个时间并显示在页面上,我用getFullYear() ,getMonth(),getDate()分别获得了年月日在电脑上和三星手机上页面都能正确的显示时间 ...

  4. 跟着刚哥梳理java知识点——泛型(十三)

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: public class GenericTest { public static void main(String[] a ...

  5. Spring Boot 学习笔记--整合Thymeleaf

    1.新建Spring Boot项目 添加spring-boot-starter-thymeleaf依赖 <dependency> <groupId>org.springfram ...

  6. 关于Git增、删、改源地址问题

    在上篇博客中我们了解了Git的基本使用,如果你已经建立了一个远程代码库,并且遇到了远程代码库源地址修改的问题,那么这篇博客可能会帮到你. 1.如何查看当前远程Git库源地址呢? $git remote ...

  7. 判断iframe页面是否加载完成

        if (frames("appIframe").document.readyState !="complete") {          alert(& ...

  8. java中创建对象中使用默认构造函数的注意点

    public class Test3 {   private int n;   Test3() {      System.out.println("调用默认构造器");   }  ...

  9. Java 中的接口有什么作用?好处?

    接口的作用就是把使用接口的人和实现接口的人分开,实现接口的人不必要关心谁去使用,而使用接口的人也不用关心谁实现的接口,由接口将他们联系在一起. 很多JAVA初级程序员对于接口存在的意义很疑惑.不知道接 ...

  10. Java实现压缩文件与解压缩文件

    由于工作需要,需要将zip的压缩文件进行解压,经过调查发现,存在两个开源的工具包,一个是Apache的ant工具包,另一个就是Java api自带的工具包:但是Java自带的工具包存在问题:如果压缩或 ...