JQuery 控制超出内容显示省略号

最新推荐文章于 2023-06-14 15:17:41 发布
最新推荐文章于 2023-06-14 15:17:41 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： js 文章标签： jquery javascript

长度超出规定长度，显示省略号

设置class为displayPart，

设置自定义属，displayLength可显示长度（不包含...），双字节字符，长度 *2，




  1. <script type="text/javascript">  
  2.     $.fn.extend({  
  3.         displayPart:function () {  
  4.             var displayLength = 100;  
  5.             displayLength = this.attr("displayLength") || displayLength;  
  6.             var text = this.text();  
  7.             if (!text) return "";  
  8.   
  9.             var result = "";  
  10.             var count = 0;  
  11.             for (var i = 0; i < displayLength; i++) {  
  12.                 var _char = text.charAt(i);  
  13.                 if (count >= displayLength)  break;  
  14.                 if (/[^x00-xff]/.test(_char))  count++;  //双字节字符，//[u4e00-u9fa5]中文  
  15.   
  16.                 result += _char;  
  17.                 count++;  
  18.             }  
  19.             if (result.length < text.length) {  
  20.                 result += "...";  
  21.             }  
  22.             this.text(result);  
  23.         }  
  24.     });  
  25.   
  26.     $(function () {  
  27.         $(".displayPart").displayPart();  
  28.     });  
  29.   
  30. </script>  


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.     <title> New Document </title>  
  5.     <meta name="Generator" content="EditPlus">  
  6.     <meta name="Author" content="">  
  7.     <meta name="Keywords" content="">  
  8.     <meta name="Description" content="">  
  9.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  10. </head>  
  11.   
  12. <body>  
  13. <h2>hello world</h2>  
  14.   
  15. <div style="width:500px;">  
  16.       hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world!!!
  17. </div>  
  18.   
  19. <hr>  
  20. <h2>hello</h2>  
  21.   
  22. <div class="displayPart" displayLength="40"> hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhelloworldhello worldhello worldhello worldhello worldhello worldhello world
  23.  
  24. </div>  
  25.   
  26.   
  27. </body>  
  28. </html>  

带眼镜的农民
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 文字超出省略号，点击显示全部、收起
jiaofeng_hou的博客
01-22 1万+
jquery 文字超出省略号，点击显示全部、收起             两句话深度开发几号上的佛牌维护佛文化的开户费收到了家很富是的开户费了色块大黄蜂评委会分是开将恢复时来得快积分还圣诞快乐抵抗力金凤凰收到了开间房                     复合弓放假光华科技个我快让他也未发生的分数线从V型从v错把女女过一会就返回二过水电费三的丰盛的v格式规范换
JQuery---长度超出显示省略号
xxb2008的专栏
05-18 5522
长度超出规定长度，显示省略号 设置class为displayPart， 设置自定义属，displayLength可显示长度（不包含...），双字节字符，长度 *2， $.fn.extend({ displayPart:function () { var displayLength = 100;
jquery 判断文字是否超出div出现三个点的省略号
笔记库
03-16 1099
$('.inner-text').on('click',function () { var scrollHeight = $(this)[0].scrollHeight var height = $(this).height() if(scrollHeight > height){ console.log('此元素文本被省略') } }) ...
jquery控制文字内容溢出用点点点(…)省略号表示
weixin_33815613的博客
05-06 161
jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($...
jq 多行文本超出显示...
LG20091570的博客
12-09 2401
jq多行文本超出多余的字就不显示jq多行文本超出多余的字就不显示 文本超出隐藏，用类名的超出隐藏
JQuery 控制内容长度超出规定长度显示省略号
10-25
主要介绍JQuery如何实现控制内容长度超出规定长度显示省略号,需要的朋友可以参考下
网页文字溢出显示省略号jQuery插件代码
06-10
5. **设置选项**：插件提供了多种可配置的选项，如`ellipsis`（省略号内容）、`wrap`（溢出内容的处理方式）和`after`（省略号后的内容）。你可以根据需要调整这些参数，以满足特定的设计需求。 6. **响应式设计**...
jQuery文字溢出显示省略号插件.zip
07-04
ellipsis: '...', // 省略号内容，可以自定义 after: null // 截断后显示的额外内容，可以是一个元素或者HTML字符串 }); ``` 4. 更新内容。如果元素中的内容发生变化，可以调用`update`方法来重新计算和截断文本...
jQuery文字溢出显示省略号插件特效代码
03-20
总的来说，jQuery文字溢出显示省略号插件是提升网页用户体验的有效工具，它让开发者能够轻松控制文本显示，确保信息的清晰呈现，同时保持页面的美观和一致性。熟练掌握这一技术，可以帮助开发者在网页设计中创建更加...
[jQuery]超出容器部分...
weixin_30326515的博客
07-14 116
思路: 　　1.获取容器的内部区域高度eleH 　　2.获取文字的内部区域高度pEle 　　3.循环判断 pEle 和 eleH的大小 　　　　当 pEle > EleH 的时候，将结尾的文字替换... 代码: <div class="description"> <span>测试</span> </di...
文本超出两行，显示隐藏和展开按钮
kilito_01的博客
04-10 2090
文本超出两行，显示隐藏和展开按钮
用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容
蛤蟆仙人
09-23 569
用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容   1.test.jsp &lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; char
多行文本溢出显示省略号
最新发布
weixin_42645716的博客
06-14 664
多行省略。css实现，Clamp.js实现，jQuery.dotdotdot 实现
jq循环遍历元素的高度，判断超出显示更多按钮
qq_45067263的博客
06-01 1013
项目场景： jq循环遍历元素的高度，用于判断超出显示更多按钮然后点击展示全部，再次点击控制显示一行 问题描述： 第一步：jq循环遍历元素的高度： var divlist=$(".c-classify div").find('ul') console.log(divlist); for(var i=0;i<divlist.length;i++){ console.log(divlist[i].offsetHeight); } 第二步：jq根据动态下标改变样式显示
文本溢出处理显示省略号
热门推荐
m0_73486305的博客
10-09 1万+
文本溢出处理显示省略号
jquery 设置文本溢出隐藏_超详细的文本溢出添加省略号。。。。
weixin_39576127的博客
10-27 696
超详细的文本溢出添加省略号。。。。前言　　需求：富文本溢出隐藏，超出用省略号表示。　　博主：文本溢出倒是做过不少，这富文本溢出什么鬼？老夫今天就好好研究一下这个省略号。　　ps：富文本溢出，不也是文本溢出么？空格处理？多段落？正文 1.css写法　　1.1最简单的省略号（单行，溢出隐藏）p{overflow: hidden; text-overflow:ellipsis; white-space:...
jquery 实现超出部分隐藏,鼠标移动上显示全部文字
billhepeng的专栏
04-14 1万+
css #tooltipdiv {  position: absolute;  border: 1px solid #333;  background: #f7f5d1;  padding: 3px 3px 3px 3px;  color: #333;  display: none; } .divmatnrdesc{    width:100px;overflow:hidden
css两行超出显示省略号后面带查看更多
06-01
首先，在你想要显示省略号的元素上，添加以下CSS样式： ``` text-overflow: ellipsis; white-space: nowrap; overflow: hidden; ``` 然后，在你想要添加"查看更多"链接的元素后面添加一个伪元素(:after)，比如： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值