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实现文字超出部分用省略号代替实例代码

总结

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

Javascript 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
vue-cli常用设置总结
Feb 24 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
vue文件运行的方法教学
Feb 12 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
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
jquery 插件学习(五)
2012/08/06 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
nodejs教程之入门
2014/11/21 NodeJs
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
vue组件开发之slider组件使用详解
2020/08/21 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Python中的生成器和yield详细介绍
2015/01/09 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
对python3新增的byte类型详解
2018/12/04 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Django框架反向解析操作详解
2019/11/28 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
公司授权委托书
2014/10/17 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书