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>

效果图:

js实现文字截断功能

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

时间: 2016-09-11

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使用iconv中文截断问题的解决方法

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

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

oracle中截断表的使用介绍

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

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

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

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

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

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 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

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

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

Android编程中activity启动时出现白屏、黑屏问题的解决方法

本文实例讲述了Android编程中activity启动时出现白屏.黑屏问题的解决方法.分享给大家供大家参考,具体如下: 默认情况下 activity 启动的时候先把屏幕刷成白色,再绘制界面,绘制界面或多或少有点延迟,这段时间中你看到的就是白屏,显然影响用户体验,怎么消除呢? 在 Activity theme 设置style 即可 <style name="AppTheme" parent="android:Theme.Light.NoTitleBar">

按钮的Ajax请求时一次点击两次提交的解决方法

页面中的按钮的type是submit的: <input type="submit" value="Create" id="submit" /> ajax的请求,在JQuery中是: $(function () { $('#submit').click(function () { var createGenreForm = $('#createGenreForm'); if (createGenreForm.valid()) { var

CentOS下安装mysql时忘记设置root密码致无法登录的解决方法

前言 昨天一天都是启动mysql时提示:The server quit without updating PID file,今天重装了mysql之后还是同样报错,然后恢复了一下/usr/my.cnf突然就可以启动了.(明明昨天/usr/my.cnf就是默认的,有个解决方法说改这个文件才改的) 然后现在就到没有设置root密码的问题了,搜了几个方法都不行,直到看到下面这个方法一才行. 解决方法一: # /etc/init.d/mysql stop # mysqld_safe --user=mysq

php连接不上mysql但mysql命令行操作正常的解决方法

故障状况:php网站连接mysql失败,但在命令行下通过mysql命令可登录并正常操作.解决方案:1.命令行下登录mysql,执行以下命令: 复制代码 代码如下: show variables like 'socket'; 执行后会得到类似于如下回显: 复制代码 代码如下: "Variable_name"        "Value""socket"                  "/home/mysql/data/mysql.so

ASP.NET导出Excel打开时提示:与文件扩展名指定文件不一致解决方法

"将页面显示的GridView中的数据,导出到Excel表格中"时遇到这样一个错误: C# 导出Excel文件 打开Excel文件格式与扩展名指定格式不一致.具体提示如图: 解决办法:这里采用"修改注册表的方法"解决此问题,这并没从根上解决问题: 1.打开注册表编辑器方法:开始 -> 运行 -> 输入regedit -> 确定 2.找到注册表子项HKEY_CURRENT_USER\Software\Microsoft\Office\12.0\Exc

MySQL优化表时提示 Table is already up to date的解决方法

在后台使用phpMyAdmin对数据库进行优化时,显示成"Table is already up to date". 很多人可能会对这次感到担心,因为默认优化表后提示是"status OK",如下: Table Op Msg_type Msg_text commentmeta optimize status OK comments optimize status OK term_taxonomy optimize status OK usermeta optimiz

asp.net程序编译调试时偶尔出现访问被拒绝的错误的解决方法

问题描述: 编写asp.net程序,当编译调试比较频繁的时候,很容易经常地出现访问被拒绝.形如: 分析器错误信息: 访问被拒绝:"Microsoft.Web.UI.WebControls".源错误: 行 197: <add assembly="System.Web.Mobile, Version=1.0.5000.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>行 198: <add as

MySQL部署时提示Table mysql.plugin doesn’t exist的解决方法

今天部署了免安装版的MySQL,出现了Table 'mysql.plugin' doesn't exist的问题,苦恼了好久,终于在网上找到了解决方案,现整理一下给大家分享: 系统环境:Win10 64位 MySQL版本:mysql-5.7.17-winX64 部署的步骤就是按照网上说的: 1:修改环境变量path,增加值C:\Program Files\mysql-5.7.17-winX64\bin 2:修改my-default.ini,重命名为my.ini,修改文件内容: # basedir

Access中字段上自动打开的输入法的解决方法

Office 2003下的: 菜单   工具-->选项-->键盘页里将"数据表输入法控件"框里的勾去掉即可