使用 js 實現文本過多時隱藏部分文本
情景描述： 有時候我們需要顯示部分文字，就像 QQ 空間這樣，先顯示部分文字，加一個【查看全文】，讓用戶選擇是否查看全部
解決方法：
第一步：在一個 id 為 fullText 的 div 標簽中存放所有文本，在另一個名為 subText 的div標簽中存放部分文本（20個字為例）的文本，在一個 a 標簽中實現點擊效果。頁面初識加載時，將要顯示的文本放入一個 text 變量中，將fullText 的 div 的文本置為空，判斷 text 長度是否大於20，若大於20，在名為subText 的 div 標簽中顯示前20個字的文本+“…查看全文”。若不大於20，在subText 顯示全部文本。
第二步：點擊a標簽時，判斷 a 標簽的文本內容，若為“…查看全文”，將 text 變量中的值賦給 subText，並將 a 標簽改為”收起”。若a標簽中的內容為”收起”，將 text 變量的前9個值賦給 subText 並將 a 標簽改為“…查看全文”。
hideText.html 源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隱藏功能</title>
</head>
<body>
<div id="d1">
<div id="fullText">
人工智能，英文縮寫為AI。它是研究、開發用於模擬、延伸和擴展人的智能的理論、方法、技術及應用系統的一門新的技術科學。
人工智能是計算機科學的一個分支，它企圖了解智能的實質，並生產出一種新的能以人類智能相似的方式做出反應的智能機器，該領域的研究包括機器人、語言識別、圖像識別、自然語言處理和專家系統等。人工智能從誕生以來，理論和技術日益成熟，應用領域也不斷擴大，可以設想，未來人工智能帶來的科技產品，將會是人類智慧的“容器”。人工智能可以對人的意識、思維的信息過程的模擬。人工智能不是人的智能，但能像人那樣思考、也可能超過人的智能。
</div>
<div id="subText"></div><a id="btn" onclick="change()" style="color: blue;"></a>
</div>
<script>
var text;
function show() {
text = document.getElementById("fullText").innerHTML;
document.getElementById("fullText").innerHTML = "";
document.getElementById("subText").style.float = "left";
document.getElementById("btn").style.float = "left";
if(text.length > 20) {
document.getElementById("subText").innerHTML = text.substring(0, 20);
document.getElementById("btn").innerHTML = "...查看全文";
} else {
document.getElementById("subText").innerHTML = text;
document.getElementById("btn").innerHTML = "";
}
}
function change() {
var t = document.getElementById("btn");
var tt = document.getElementById("subText");
if(t.innerHTML == "...查看全文") {
tt.innerHTML = text;
t.innerHTML = "收起"
} else {
tt.innerHTML = text.substring(0, 20);
t.innerHTML = "...查看全文"
}
}
show();
</script>
</body>
</html>