js實(shí)現(xiàn)文字超出部分用省略號(hào)代替實(shí)例代碼
更新時(shí)間：2016年09月01日 11:34:06 投稿：daisy
關(guān)于超出一定字?jǐn)?shù)用省略號(hào)顯示的問題，這種要求在我們?nèi)粘ｉ_發(fā)的時(shí)候經(jīng)常見到，我們之前基本都是用CSS來完成的，今天給大家分享個(gè)Javascript實(shí)現(xiàn)這個(gè)功能的示例代碼，有需要的可以參考借鑒。
話不多說，我們直接看代碼
<!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>超過的文字用省略號(hào)代替的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">超過的文字用省略號(hào)代替的js寫法。</p></div>
</body>
</html>
實(shí)現(xiàn)效果圖
總結(jié)
其實(shí)主要還是用到了js的substring方法，實(shí)現(xiàn)這個(gè)功能還是很簡單的，但是很實(shí)用，以上就是這篇文章的全部內(nèi)容了，希望這篇文章對(duì)大家能有一定的幫助。
相關(guān)文章
表單提交時(shí)自動(dòng)復(fù)制內(nèi)容到剪貼板的js代碼
表單提交時(shí)自動(dòng)復(fù)制內(nèi)容到剪貼板的js代碼...2007-03-03
JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)
這篇文章主要介紹了JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)的相關(guān)資料,需要的朋友可以參考下2016-05-05
情人節(jié)單身的我是如何在敲完代碼之后收到12束玫瑰的(javascript)
這篇文章主要介紹了情人節(jié)單身的我是如何在敲完代碼之后收到12束玫瑰的，感興趣的朋友一起來學(xué)習(xí)下2015-08-08
如何消除inline-block屬性帶來的標(biāo)簽間間隙
這篇文章主要介紹了如何消除inline-block屬性帶來的標(biāo)簽間間隙的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章介紹了JavaScript的11個(gè)小技巧，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Bun運(yùn)行時(shí)是新一代高性能JavaScript/TypeScript運(yùn)行時(shí)
Bun由Jarred Sumner創(chuàng)建,是一款新興的JavaScript和TypeScript運(yùn)行時(shí),旨在比Node.js和Deno提供更高性能和快速啟動(dòng),Bun使用Zig語言編寫,內(nèi)置包管理并支持Node.js大部分API,適用于高并發(fā)API服務(wù)和快速構(gòu)建工具2024-11-11
js實(shí)現(xiàn)類選擇器和name屬性選擇器的示例步驟
這篇文章主要介紹了js實(shí)現(xiàn)類選擇器和name屬性選擇器的示例步驟，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2021-02-02
怎樣用JavaScript實(shí)現(xiàn)觀察者模式
這篇文章主要介紹了怎樣用JavaScript實(shí)現(xiàn)觀察者模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，可以參考一下2021-04-04
本文主要介紹了JavaScript數(shù)組迭代方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了一個(gè)網(wǎng)易表單以及及時(shí)驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03