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>

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

加载后的效果

点击后的效果

再次点击后

时间: 2024-10-18 05:39:46

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

css中a标签内容超出最大字数隐藏处理

问题:a标签内容超出最大字数显示问题 1.超出是最后显示为“...” 2.鼠标放在上面显示完整内容 3.点击新窗口打开链接内容 解决方法: css部分: .list{font:Georgia, "Times New Roman", Times, serif;font-size:14px;width:200px;display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellips

设置一个DIV的文字超出隐藏,并用省略号表示未完待续

<div style="width:50px;height:18px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;">设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续 设置一个DIV的文字超出隐藏,并用省略号表示未完待续</div>

内容超出了就隐藏超出部分的后面带(省略号)... , 如果没有超出就正常显示后面不带省略号

text-overflow: ellipsis要配合 下面两个css样式使用 效果是 当一个固定宽的容器中 (设置了 overflow:hidden 与white-space:nowrap不让超出本分换行)的内容超出了就隐藏超出部分的后面带(省略号)...    ,        如果没有超出就正常显示后面不带省略号 white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

使用CSS如何实现截取标题并用省略号表示超出部分

使用CSS如何实现截取标题并用省略号表示超出部分:建议:尽可能的手写代码,可以有效的提高学习效率和深度.众多的网站都有这样的效果,当新闻标题过长的时候,一般都会截取一部分,并且会在末尾使用省略号(...)表示被截取掉的部分.这样的效果当然也可以由后台程序员来完成,当然前台人员利用CSS也可以实现此效果,可以省却很多后台代码,有着不小的有点.下面简单介绍一下如何实现此种效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta ch

文字超出限制字数后隐藏

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文字超出限制字数后隐藏</title> <style> .text { width: 800px; height: 48px; line-height: 24px; color: #333; background: #ccc; border: #

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

在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行:最后找的的解决方案如下: table{         table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{     width:100%;     word-break:keep-all;/*

css中要求文字必须是一行,超出部分自动隐藏的问题

问题:客户要求文字必须是一行,超出部分自动隐藏.而现在没有办法在php里控制截取字数,只能在前端css里处理. 首页div的宽度是一定的. 处理办法为: word-break: keep-all;/*这个可以不要*/ word-wrap: break-word; white-space: nowrap;<span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sa

超出文本截取替换为省略号

今天做了一个如下图的模块 其中,标题以及介绍这两块都需要做超出某个宽度就截取一行或两行文字,后面用省略号代替. 由于是做的手机页面,用JS来开销太大,只能从CSS入手. 一行的很好解决. 如下就OK了. white-space:nowrap;overflow:hidden;text-overflow:ellipsis; 多行的想了很久,比如,写定行高,超出隐藏,弄个省略号作为补丁打在尾部.但是有个问题,页面宽度不固定,可能会出现只遮住一半字的情况,看起来很Low. 继续查找资料,CSSV5啊!

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

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     width:31em;     word-break:keep-all;/* 不换行 */     white-space:nowrap;/* 不换行 */     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */     text-overflow:ellipsis;