关于超出一定字数用省略号显示的问题，这种要求在我们日常开发的时候经常见到，我们之前基本都是用CSS来完成的，今天给大家分享个Javascript实现这个功能的示例代码，有需要的可以参考借鉴。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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实现文字超出部分用省略号代替实例代码的更多相关文章

  1. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  2. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  3. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  4. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  5. HTML5 元素文字超出部分显示省略号（支持多行），兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  6. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  7. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  8. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. 使用js控制文本超出部分显示省略号

    js代码 // 字数限制30字,超出不显示 fontNumber (date) { const length = date.length if (length > 30) { var str = ...

随机推荐

  1. MVC自定义视图引擎地址

    先看结构 1.RouteConfig 文件(注意顺序) public static void RegisterRoutes(RouteCollection routes) { routes.Ignor ...

  2. 深入解析内存原理：SRAM的基本原理

    1. SRAM芯片的引脚定义早期的SRAM 芯片采用了20 线双列直插(DIP:Dual Inline Package)封装技术,它们之所以具有这么多的针脚,是因为它们必须:• 每个地址信号都需要一根 ...

  3. 012_如何清除DNS缓存

    运维过程中经常会进行切换域名解析等的操作,就需要查看是否更新.但常常DNS设置已经更新了,但是用户那边的DNS还是没有更新. 以下分析几点原因及我的解决方案. 一. <1>本地你的dns缓 ...

  4. Log4j maven依赖配置

    做项目的时候,经常需要给应用打印日志,LOG4J是我们的不二选择,项目管理使用maven构建时,pom.xml配置如下 <!--日志 start--> <dependency> ...

  5. Chrome浏览器JSON格式化插件

    经常我们使用浏览器调试某个接口,返回的结果看起来很乱如下 我们使用JSON-handle来进行格式化 安装 插件下载地址 插件下载后,在浏览器输入:chrome://extensions/ 将下载后的 ...

  6. python 全栈开发，Day81(博客系统个人主页,文章详情页)

    一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...

  7. 【C语言】 二叉树的基本运算

    • 二叉树节点类型BTNode: typedef struct node { char data; struct node *lchild, *rchild; } BTNode; 创建二叉树 void ...

  8. java 使用反射在dto和entity 实体类之间进行转换

    package com.example.demo.utils; import java.lang.reflect.Method; import java.util.List; import com.e ...

  9. 解决mount.nfs: access denied by server while mounting错误

    环境:oraclelinux6.7 以前在centos服务器上安装nfs.挂载NFS都没出现问题,今天在oraclelinux上安装后,在客户端mount的时候报mount.nfs: access d ...

  10. 新建asp.net core项目

    开发环境:Windows Server R2 2008 开发工具:Microsoft Visual Studio 2017 新建asp.net core项目 创建web项目时,务必选择“ASP.NET ...