js實現(xiàn)文字超出部分用省略號代替實例代碼
更新時間：2016年09月01日 11:34:06 投稿：daisy
關(guān)于超出一定字數(shù)用省略號顯示的問題，這種要求在我們?nèi)粘ｉ_發(fā)的時候經(jīng)常見到，我們之前基本都是用CSS來完成的，今天給大家分享個Javascript實現(xiàn)這個功能的示例代碼，有需要的可以參考借鑒。
話不多說，我們直接看代碼
<!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>
實現(xiàn)效果圖
總結(jié)
其實主要還是用到了js的substring方法，實現(xiàn)這個功能還是很簡單的，但是很實用，以上就是這篇文章的全部內(nèi)容了，希望這篇文章對大家能有一定的幫助。
相關(guān)文章
這篇文章主要介紹了Js跳出兩級循環(huán)方法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細講講Symbol的使用，需要的可以參考一下2022-09-09
下面小編就為大家?guī)硪黄齽t js分轉(zhuǎn)元帶千分符號詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
layui 選擇列表,打勾,點擊確定返回數(shù)據(jù)的例子
今天小編就為大家分享一篇layui 選擇列表,打勾,點擊確定返回數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
下面小編就為大家?guī)硪黄狫S中對象與字符串的互相轉(zhuǎn)換詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
今天小編就為大家分享一篇解決layer.msg 不居中 ifram中的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化，想了解函數(shù)柯里化的同學(xué)，可以參考下2021-04-04
本篇文章主要分享了javascript實現(xiàn)導(dǎo)航欄中英文切換效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
由PHP傳入JS處理的時間戳我說怎么老是對不上號呢，原來JS時間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的。恩，基礎(chǔ)還是要補補的2014-06-06
行為驗證碼通過用戶的操作來完成驗證,常見的行為驗證碼有拖動式和點觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實現(xiàn)登錄拼圖驗證功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02