Js单行溢出自动截取字符串长度，添加省略号

javaScript字符串处理函数，根据定义的长度截取字符串，超出部分裁掉追加……，很多时候网页上显示的内容需要缩成“...”该方法用于处理字符串显示固定长度，超长部分用“...”代替：

 代码如下 复制代码

/**参数说明：
 * 根据长度截取先使用字符串，超长部分追加…
 * str 对象字符串
 * len 目标字节长度
 * 返回值： 处理结果字符串
 */
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;
}

当然，如果你要求不高可以使用css实现，css也可以达到效果但就是兼容性差了一点

html代码：

 代码如下 复制代码

<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.111cn.net</span><p>
</div>

css代码：
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}

/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* FF 下的样式 */
p{clear:both;}
p span{
float:left;
max-width:175px;   /*IE不能解释该属性，而FF可以*/
}
p:after{
content:"...";
}

好了上面的css目前测试了ie浏览器与ff浏览器是兼容了，但在其它浏览器中暂时还未测试过哦。

时间： 2024-11-10 11:24:41

Js单行溢出自动截取字符串长度，添加省略号的相关文章

客户端(CSS)解决自动截取字符串长度并以...代替

通常的我们在读取文章标题的时候,遇到字符过多,都是通过程序在SERVER端截取一定的字符数,然后添加...来实现标题长度截取的.其实我们也可以通过CSS来控制. 实列如下: .title { width:200px; white-space:nowrap; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; } 可用span或div引用,例如: <span class=title>客户端解决标题显示太长省略多余部分并加省略

Postgresql 插入数据时自动截取一定长度的字符串

5.1. INSERT 5.1.1. 自动截取字符串 CREATE TABLE test (c varchar(5)); 现在开始插入数据库,每次增加一个长度 test=> INSERT INTO test VALUES ('1'); INSERT 0 1 test=> INSERT INTO test VALUES ('12'); INSERT 0 1 test=> INSERT INTO test VALUES ('123'); INSERT 0 1 test=> INSERT

CSS/Js文本溢出自动添加省略号ellipsis

  CSS文本溢出省略号 text-overflow:ellipsis ext-overflow是一个比较特殊的属性,W3C早前的文档中(目前的文档中没有包含text-overflow属性,FML!)对其的定义是: Name: text-overflow-mode Value: clip | ellipsis | ellipsis-word clip : 不显示省略标记(-),而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记(-),省略标记插入的位置是最后一个字符. elli

js中根据字数截取字符串，不能截断url_javascript技巧

今天收到个需求: 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截取字符串长度函数详解

常用的字符处理函数  代码如下 复制代码 strstr(string,string) = strchr(,) //从前面第一次出现某个字符串的地方截取到最后 strrchr(string,string) //从某个字符串从最后出现的位置截取到结尾 strpos(string,string[,int]) //某个字符串第一次出现的位置 strrpos(string,string) //某个字符串最后一次出现的位置 substr(string,int[,int]) //从指定位置开始截取字符串,可以

用css截取字符串长度的方法

有时我们在做页面展示的时候,会遇到文章标题字符过多的问题,需要截取一定长度并后面用省略号代替.这个可以用css来实现.不过在火狐浏览器上不显示省略号,用时要注意兼容性.  代码如下 复制代码  <style type="text/css"> .cutLen{...}{     width:200px;     overflow:hidden;     white-space:nowrap;     text-overflow:ellipsis; } </style&g

很实用的二款jquery 截取字符串长度方法

 代码如下 复制代码 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html

PHP截取字符串长度（中英文混合字符串）

取部份字符串. 语法: string substr(string string, int start, int [length]); 返回值: 字符串 函数种类: 资料处理 内容说明 本函数将字符串 string 的第 start 位起的字符串取出 length 个字符.若 start 为负数,则从字符串尾端算起.若可省略的参数 length 存在,但为负数,则表示取到倒数第 length 个字符. 使用范例  代码如下 复制代码 <? echo substr("abcdef",

Powershell截取字符串并添加省略号的例子_PowerShell

限制字符串大小 支持所有版本. 确保你输出的字符串不会过长,当字符串超过你指定的长度你可以用下面办法将其缩短. 复制代码 代码如下: if ($text.Length -gt $MaxLength) {   $text.Substring(0,$MaxLength) + '...' } else {   $text }