文章的篇幅往往不是那麼恰到好處，如果以原有的篇幅展示，那麼有可能會影響網頁的佈局或者美觀度，這個時候就要根據情況適量截取一定的字符串，以適應佈局，不過當點擊一個按鈕的時候依然可以展開全部的內容，以下就透過一個實例詳細介紹一下如何實現此效果,程式碼範例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>字符串截取展开效果</title>
<style type="text/css">
#thediv{
width:200px;
margin:0px auto;
}
</style>
<script type="text/javascript">
function cutStr(){
var odiv=document.getElementById("thediv");
var str=odiv.innerHTML;
var ospan=document.createElement("span");
var olink=document.createElement("a");
ospan.innerHTML=str.substring(0,20);
olink.innerHTML=str.length>20?"...":"";
olink.href="###";
olink.onclick=function(){
if(olink.innerHTML=="..."){
olink.innerHTML="收起";
ospan.innerHTML=str;
}
else{
olink.innerHTML="...";
ospan.innerHTML=str.substring(0,20);
}
}
odiv.innerHTML="";
odiv.appendChild(ospan);
odiv.appendChild(olink);
};
window.onload=function(){
cutStr();
}
</script>
<body>
<div id="thediv">脚本之家欢迎您，个人的力量再强也只是一只强壮的而已，如果有分享和胸怀和合作的精神，那么就有可能活得巨大进步。</div>
</body>
</html>
以上程式碼實現了我們的要求，截取指定的字串，後面以"..."結尾，當點擊這個結尾的時候，能夠展開所有的文字內容，下面就介紹一下此效果的實現過程。
一.實現原理:
建立一個span元素和a元素，然後使用substring()函數截取指定的字串並將其設為span元素的內容，然後判斷原來字串的長度是否大於指定長度，如果大於，則將a元素中的內容設定為"..."。然後將原有div清空，然後span元素和a元素加入div中去，這樣就實現了截取功能。為a元素註冊時間處理函數，點擊此按鈕就會執行事件處理函數，此函數首先判斷是出於何種狀態，如果處於收起狀態，那麼就會將a元素中的內容設為"收起" ，並且將原有所有字元放入span，這樣就實現了展開，如果出於展開狀態，那麼就是截取字元和修改a元素中的內容。原理大體如此，可以參考相關閱讀。
以上內容是本文跟大家介紹的JavaScript截取指定長度字串點擊可以展開全部程式碼 ，希望大家喜歡。
