JavaScript实现文字超出指定长度显示省略号的代码示例

作者:拾光时间:2026-10-30 13:13:31浏览:616

本文介绍如何使用JavaScript的substring方法实现文字超出指定长度时自动显示省略号的功能。通过判断字符串实际字节长度与目标长度的关系,截断多余字符并在末尾添加省略号,适用于列表项或标题显示等场景,代码简洁且实用。

JavaScript实现文字超出指定长度显示省略号的代码示例

直接查看相关代码实现。


<!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>

实现效果展示

JavaScript实现文字超出指定长度显示省略号的代码示例

总结

该功能主要依赖于JavaScript的substring方法。虽然实现逻辑相对简单,但在实际开发中具有较高的实用价值。以上就是本文的全部内容,希望能对读者有所帮助。

作者最新文章