编程 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 AJAX 用于计算点击率(统计)

Jun 30 Javascript

基于jquery的无限级联下拉框js插件

Oct 29 Javascript

js arguments,jcallee caller用法总结

Nov 30 Javascript

jQuery实现瀑布流的取巧做法分享

Jan 12 Javascript

原生javascript实现的一个简单动画效果

Mar 30 Javascript

EasyUI布局高度自适应

Jun 04 Javascript

Node.js如何自动审核团队的代码

Jul 20 Javascript

javascript中异常处理案例(推荐)

Oct 03 Javascript

原生Javascript和jQuery做轮播图简单例子

Oct 11 Javascript

vue2.0父子组件间通信的实现方法

Apr 19 Javascript

Vue网页html转换PDF（最低兼容ie10）的思路详解

Aug 24 Javascript

Vue如何实现监听组件原生事件

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