编程 Javascript

js实现文字超出部分用省略号代替实例代码

Posted in Javascript onSeptember 01, 2016

话不多说，我们直接看代码

<!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; charset=utf-8" />
<title>超过的文字用省略号代替的js写法</title>
</head>

<body>
<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;
}

window.onload=function(){
  var str = document.getElementById('cut_str').innerHTML;
  var s=cutString(str,15);
  document.getElementById('cut_str').innerHTML=s;
}
</script>

<div class="js_cut_str"><p id="cut_str">超过的文字用省略号代替的js写法。</p></div>
</body>
</html>

总结

其实主要还是用到了js的substring方法，实现这个功能还是很简单的，但是很实用，以上就是这篇文章的全部内容了，希望这篇文章对大家能有一定的帮助。

js实现文字超出部分用省略号代替实例代码

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery tools之tabs 选项卡/页签

Jul 25 Javascript

JS常用正则表达式总结

Nov 12 Javascript

JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例

Apr 22 Javascript

JavaScript中用sort()方法对数组元素进行排序的操作

Jun 09 Javascript

jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

Oct 30 Javascript

javascript中闭包概念与用法深入理解

Dec 15 Javascript

js图片延迟加载(Lazyload)三种实现方式

Mar 01 Javascript

基于vue.js实现侧边菜单栏

Mar 20 Javascript

Vue组件通信的四种方式汇总

Feb 08 Javascript

Node.js readline模块与util模块的使用

Mar 01 Javascript

Vue表单类的父子组件数据传递示例

May 03 Javascript

JS函数动态传递参数的方法分析【基于arguments对象】

Jun 05 Javascript

纯js和css完成贪吃蛇小游戏demo

Sep 01 #Javascript

在web中js实现类似excel的表格控件

Sep 01 #Javascript

Javascript点击按钮随机改变数字与其颜色

Sep 01 #Javascript

AngularJs 指令详解及示例代码

Sep 01 #Javascript

JS表格组件BootstrapTable行内编辑解决方案x-editable

Sep 01 #Javascript

JS实现列表的响应式排版(推荐)

Sep 01 #Javascript

利用Jquery队列实现根据输入数量显示的动画

Sep 01 #Javascript