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