js实现文字截断功能

先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦。这里写了一个js的文字截断功能。直接上代码。

HTML(测试用的): 

<div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="10" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="5" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="2" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="20" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="100" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>

JS:

var limit=[];
    var Text=[];
    var Pox=document.getElementsByTagName('*');
    for(var i=0;i<Pox.length;i++){
     if(Pox[i].getAttribute("limit")){
      limit[i]=Pox[i].getAttribute("limit");
      Text[i]=Pox[i].innerHTML;
      if(limit[i]<Text[i].length){
       Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
      }
     }
    } 

这里用getElementsByTagName获取所有节点遍历,if(Pox[i].getAttribute("limit"))筛选含有limit这个自定义属性的节点,然后获取各个节点自定义属性limit的值,将其放入limit数组中,把各个节点文字放入Text数组中,将需要截断的值和文本长度作比较,进行截断。

全部JS,这里写的自调:

<script type="text/javascript">
 window.onload=function(){
  (function limit(){
   var limit=[];
    var Text=[];
    var Pox=document.getElementsByTagName('*');
    for(var i=0;i<Pox.length;i++){
     if(Pox[i].getAttribute("limit")){
      limit[i]=Pox[i].getAttribute("limit");
      Text[i]=Pox[i].innerHTML;
      if(limit[i]<Text[i].length){
      Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
      }
     }
    }
   }());
   }
</script>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-09-11

C# double和decimal数据类型以截断的方式保留指定的小数位数

项目中要用到以截断的方式取小数点后两位,故写了以下方法: 复制代码 代码如下: /// <summary> /// 将小数值按指定的小数位数截断 /// </summary> /// <param name="d">要截断的小数</param> /// <param name="s">小数位数,s大于等于0,小于等于28</param> /// <returns></retur

PHP在字符断点处截断文字的实现代码

复制代码 代码如下: //所谓断字 (word break),即一个单词可在转行时断开的地方.这一函数将在断字处截断字符串. // Please acknowledge use of this code by including this header. function myTruncate($string, $limit, $break=".", $pad="...") { // return with no change if string is shorte

php使用iconv中文截断问题的解决方法

本文实例讲述了php使用iconv中文截断问题的解决方法.分享给大家供大家参考.具体分析如下: 今天做了一个采集程序,原理很简单,使用curl方法把对方页面的html获取分析,然后正则提取需要的数据并保存在数据库. 由于对方页面是GB2312编码,而本地使用的是UTF-8编码.因此在采集后需要进行编码转换. 使用了iconv方法进行编码转换 iconv - 字符串按要求的字符编码来转换  string iconv ( string $in_charset , string $out_charse

oracle中截断表的使用介绍

在Oracle中如果删除了表中的某一条数据,还可以通过回滚操作(rollback)进行回滚,假如想清空一张 表的数据,但是又不想使其能进行回滚操作,就可以立刻释放资源,这时就需要使用截断表了.它的主要功能就是彻底删除数据,使其不能进行回滚.这里我打个比方大家就立刻能明了它的作用.大家众所周知,当我们在自己的PC(personcomputer)上删除某一个文件,它并没有彻底删除而是进入了回收站,你要在回收站中再将其删除才算彻底清除.截断表就相当于直接将数据从pc上删除,而不会放入回收站. 截断表格

PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法

本文实例讲述了PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法.分享给大家供大家参考.具体分析如下: PHP 连接 MSSQL 的新手经常遇到这个问题:数据库里面的 nvarchar 字段中数据一切正常,但是用 PHP 查询出来却发现长度只有 255,我们都知道,在 MySQL 里面 varchar 的长度只有 255,但是 MSSQL 却不是,不会是 PHP 将 nvarchar 按照 MySQL 的 varchar 处理了吧. 本文给出了解决方法: 复制代码 代码如下:

PHP UTF8中文字符截断函数代码

php中英文混合字符截断不乱码函数(utf8) 复制代码 代码如下: //utf8格式下的中文字符截断//$sourcestr 是要处理的字符串//$cutlength 为截取的长度(即字数)//$addstr 超过长度时在尾处加上的字符function cut_str($sourcestr, $cutlength, $addstr='...'){ $returnstr=''; $i=0; $n=0; $str_length=strlen($sourcestr);//字符串的字节数 while

js中根据字数截取字符串,不能截断url

今天收到个需求: 1,给一个文字,对输出的文字进行截取,保留400个字符 2,截取内容最后如果是url,保留完整url地址 3,添加省略号...... ---- 其中对url的保留比较麻烦,尤其是有两个相同url时不能采用indexOf获取其字符位置. 处理结果: 相关代码: 复制代码 代码如下: String.prototype.sizeAt = function(){ var nLen = 0; for(var i = 0, end = this.length; i<end; i++){ n

MSSQL 将截断字符串或二进制数据问题的解决方法

地图数据存放在sqlserver 2008中,使用mapxtreme7 开发时,使用Feature.Update()方法时出错的提示包含"MSSQL 将截断字符串或二进制数据" 主要原因就是给某个字段赋值时,内容大于字段的长度或类型不符造成的 解决方法: 一个是修改数据库字段大小: 再一就是是加强数据强壮性,严格的输入判断. 防止添加的信息类型或者长度与数据库表中字段所对应的类型不符合.

c#完美截断字符串代码(中文+非中文)

复制代码 代码如下: public static string Truncation(this HtmlHelper htmlHelper, string str, int len) { if (str == null || str.Length == 0 || len <= 0) { return string.Empty; } int l = str.Length; #region 计算长度 int clen = 0; while (clen < len && clen &

PHP截断标题且兼容utf8和gb2312编码

复制代码 代码如下: <?php if(strlen($r[title])>45){$str=utf8Substr($r[title],0,15)."...";}else{$str=$r[title];}echo $str; ?> //截取utf8字符串 function utf8Substr($str, $from, $len) { return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.

PHP 字符串编码截取函数(兼容utf-8和gb2312)

复制代码 代码如下: //截取字符串长度.支持utf-8和gb2312编码.若为gb2312,先将其转为utf-8,在utf-8的基础上截取然后再转换回来 function cut_string($str,$from=1,$length=10,$code='utf-8',$rear='...'){     if($code!='utf-8'){//总是将字符串转为utf-8编码         $str=iconv($code,'utf-8',$str);     }     $str_len=

php实现utf-8和GB2312编码相互转换函数代码

复制代码 代码如下: <?php /********************************************  *  * 函数名:get_utf8_to_gb($value)  * 作  用:utf8编码字符串转换成gb2312编码  * 作  者:刘先忠  * 日  期:2011-11-09   *  ********************************************/function   get_utf8_to_gb($value){  $value_1

ASP中Utf-8与Gb2312编码转换乱码问题的解决方法 页面编码声明

出现这样的问题是当你浏览UTF-8编码的时候,服务器默认用UTF-8的引擎来输出html,当你用再浏览GB2312的页面时,它还是用UTF-8来输出本应是GB2312编码的页面所以会乱码. 为了这个问题烦了我一个早上,终于的蓝色理想上得到解决. 首先让我们来了解一下Session对象提供了四个属性. 1.CodePage 读/写.整型. 定义用于在浏览器中显示页内容的代码页(Code Page).代码页是字符集的数字值,不同的语言和场所可能使用不同的代码页.例如,ANSI代码页 1252用于美国

PHP iconv 解决utf-8和gb2312编码转换问题

终于皇天不负有心人,答案还是让我找到了. 网上的都是这样用的 复制代码 代码如下: $content = iconv("utf-8","gb2312",$content); 这样做其实也对着了,看着确实是把utf-8转化为gb2312了,但是实际运行的话,往往都是以失败告终的,原因呢? 原因实际上也很简单,因为任何的函数都是执行错误的时候,同时很不幸的是iconv();就很终于出现错误.现在给你正确的答案. 真正的答案是这样的 复制代码 代码如下: $content

PHP 解决utf-8和gb2312编码转换问题

终于皇天不负有心人,答案还是让我找到了. 网上的都是这样用的 复制代码 代码如下: $content = iconv("utf-8","gb2312",$content); 这样做其实也对着了,看着确实是把utf-8转化为gb2312了,但是实际运行的话,往往都是以失败告终的,原因呢? 原因实际上也很简单,因为任何的函数都是执行错误的时候,同时很不幸的是iconv();就很终于出现错误.现在给你正确的答案. 真正的答案是这样的 复制代码 代码如下: $content

PHP函数utf8转gb2312编码

今天,我太点儿低了!转换成功了看不到字符,以为用法有问题,查看源文件,居然是<title>和</title>中的乱码,导致标签变成了:<title>乱七鼓拽?/title>,<title>后全部内容被拉到<title>中做头去了,还在群里喊了半天,发现是这的问题,气都气死了!!!用ICONV函数:iconv( "UTF-8", "gb2312" , "abc阳光123"); 据说这

unicode utf-8 gb18030 gb2312 gbk各种编码对比

但是我这个的特点是追究原理,我在乎的事情都想弄明白,于是各个qq群依次发信息,没人理会.唉,郁闷.只好自己google it and teach myself .下面是详细介绍. 还有对各方求助没有人理会,我有些个人想法.现在的人已经很少有人去深究理论了,人们的观念是得过且过,人们通常只是知道什么,不知道为什么.对编程来说,个人认为这是很悲哀的事情,也是非常危险的事情.我想可能这也是中国的IT落后于美国的原因,我希望中国的编程人员能够好好想想了. 下面的东西是从网上查到的  Unicode 的编

Ajax,UTF-8还是GB2312 eval 还是execScript

两个问题: 第一题: xmlhttp 的 responseText 默认总是utf-8的编码,前段时间为了以最小成本解决这个问题,索性整个项目用utf-8编码.网上解决的方法不多,而且都是比较乱七八糟的,不喜欢.又不能以后所有都用utf-8. 第二题: xmlhttp 载入页的javascript脚本,不能执行.事件的驱动却仍然可用,前段时间为了回避这东西,干脆把脚本全写一起了.恶心,总这么干,每次都要载入几百K的js文件,恶心. 那么,现在有时间了,最用正统的方式解决一下, xmlhttp ,

趣谈Unicode、Ascii、utf-8、GB2312、GBK等编码知识

从头讲讲编码的故事.那么就让我们找个草堆坐下,先抽口烟,看看夜晚天空上的银河,然后想一想要从哪里开始讲起.嗯,也许这样开始比较好-- 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称为"字节". 再后来,他们又做了一些可以处理这些字节的机器,机器开动了,可以用字节来组合出很多状态,状态开始变来变去.他们看到这样是好的,于是它们就这机器称为"计算机". 开始计算机只在美国用.八位的