關(guān)于超出一定字?jǐn)?shù)用省略號(hào)顯示的問(wèn)題，這種要求在我們?nèi)粘ｉ_(kāi)發(fā)的時(shí)候經(jīng)常見(jiàn)到，我們之前基本都是用CSS來(lái)完成的，今天給大家分享個(gè)Javascript實(shí)現(xiàn)這個(gè)功能的示例代碼，有需要的可以參考借鑒。

話不多說(shuō)，我們直接看代碼

<!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>超過(guò)的文字用省略號(hào)代替的js寫法</title>
</head>

<body>
<script>
 function cutString(str, len) {
 //length屬性讀出來(lái)的漢字長(zhǎng)度為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">超過(guò)的文字用省略號(hào)代替的js寫法。</p></div>
</body>
</html>

實(shí)現(xiàn)效果圖

總結(jié)

其實(shí)主要還是用到了js的substring方法，實(shí)現(xiàn)這個(gè)功能還是很簡(jiǎn)單的，但是很實(shí)用，以上就是這篇文章的全部?jī)?nèi)容了，希望這篇文章對(duì)大家能有一定的幫助。

您可能感興趣的文章:

相關(guān)文章

Js跳出兩級(jí)循環(huán)方法代碼實(shí)例
這篇文章主要介紹了Js跳出兩級(jí)循環(huán)方法代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個(gè)獨(dú)一無(wú)二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用，需要的可以參考一下
2022-09-09
正則 js分轉(zhuǎn)元帶千分符號(hào)詳解
下面小編就為大家?guī)?lái)一篇正則 js分轉(zhuǎn)元帶千分符號(hào)詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
layui 選擇列表,打勾,點(diǎn)擊確定返回?cái)?shù)據(jù)的例子
今天小編就為大家分享一篇layui 選擇列表,打勾,點(diǎn)擊確定返回?cái)?shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JS中對(duì)象與字符串的互相轉(zhuǎn)換詳解
下面小編就為大家?guī)?lái)一篇JS中對(duì)象與字符串的互相轉(zhuǎn)換詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
解決layer.msg 不居中 ifram中的問(wèn)題
今天小編就為大家分享一篇解決layer.msg 不居中 ifram中的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化，想了解函數(shù)柯里化的同學(xué)，可以參考下
2021-04-04
js實(shí)現(xiàn)導(dǎo)航欄中英文切換效果
本篇文章主要分享了javascript實(shí)現(xiàn)導(dǎo)航欄中英文切換效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
php+js實(shí)現(xiàn)倒計(jì)時(shí)功能
由PHP傳入JS處理的時(shí)間戳我說(shuō)怎么老是對(duì)不上號(hào)呢，原來(lái)JS時(shí)間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的。恩，基礎(chǔ)還是要補(bǔ)補(bǔ)的
2014-06-06
js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能
行為驗(yàn)證碼通過(guò)用戶的操作來(lái)完成驗(yàn)證,常見(jiàn)的行為驗(yàn)證碼有拖動(dòng)式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02