「該如何實作出Read more 按鈕呢？」今天在寫 [FE210] 從新手到中手：前端工程加強班 這門課的作業1時，最後一個自我練習是「這次實作的畫面當頻道名稱字太多的時候，會超出一格的大小或者會直接被卡掉，有沒有辦法讓字太多的時候在尾巴顯示...？例如原本名稱叫做：「1234567」，顯示的時候變成：「12345…」？」剛好最近開始經營部落格，於是就很好奇那我每天看到的Read more按鈕到底是怎麼實做的呢？我有沒有能力做出這個按鈕呢？
結果Google一下發現，還真不難！結果Google一下發現，還真不難！而且個人還覺得W3Schools寫得有點複雜了哈哈。
Table of Contents
前置作業
因為要亂數產生中文字，所以先安裝了VS code的這個外掛：Chinese Lorem，安裝完後只要在VS code打ctlorem就會亂數產生中文字了。
以下是一段文字：
如何實作Read more的按鈕？
快車熟悉很多人傳播台南房地產十年消除，下一頁有很多，欣賞一座版面認證條件不過行情看看而在字元傳說答案，今後銀行，辦公室證券根據評分請問競爭表演起點，適應內存出發很快則是男女偉大身體檢測笑容人口，灌水版本來看想到房價高中歡迎，訓練不必傢俱一款快車，湖口可用。性別印度一時部分連續家庭因為渠道發佈積分，處理器娛樂內部就要報名內部面議趨勢台北基於體會並非其它，來電條款時間空氣合適傳奇塑膠毫不隱藏財產，不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾，網咖博士閲讀本類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼相機一絲照片職業大部分，競爭階段採用經濟專區所說心靈國際適用信譽光碟容易，留學管理員我的您可以學校同時房屋親愛的當前其他的，觀看之中部落格，眼神面前暴力網頁課程權力輔助超過，重量只是放心無法忽然地上當你存在一般二手本人水果，大會瀏。
而我們希望做出一個按鈕：Read more，這個按鈕的作用是點下後會將文章的所有文字顯示出來，也就是變成下圖這樣。
如何實作Read more的按鈕？
快車熟悉很多人傳播台南房地產十年消除，下一頁有很多，欣賞一座版面認證條件不過行情看看而在字元傳說答案，今後銀行，辦公室證券根據評分請問競爭表演起點，適應內存出發很快則是男女偉大身體檢測笑容人口，灌水版本來看想到房價高中歡迎，訓練不必傢俱一款快車，湖口可用。 … 性別印度一時部分連續家庭因為渠道發佈積分，處理器娛樂內部就要報名內部面議趨勢台北基於體會並非其它，來電條款時間空氣合適傳奇塑膠毫不隱藏財產，不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾，網咖博士閲讀本類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼相機一絲照片職業大部分，競爭階段採用經濟專區所說心靈國際適用信譽光碟容易，留學管理員我的您可以學校同時房屋親愛的當前其他的，觀看之中部落格，眼神面前暴力網頁課程權力輔助超過，重量只是放心無法忽然地上當你存在一般二手本人水果，大會瀏。
程式碼說明
HTML
- 把想隱藏的段落用span包起來，再給一個class：display: none
- 加個…字串，放在Read more按鈕之前
- 新增一個Read more按鈕
<section>
<div class="text_container">
<h1>如何實作Read more的按鈕？</h1>
<p>
快車熟悉很多人傳播台南房地產十年消除，下一頁有很多，欣賞一座版面認證條
件不過行情看看而在字元傳說答案，今後銀行，辦公室證券根據評分請問競爭表
演起點，適應內存出發很快則是男女偉大身體檢測笑容人口，灌水版本來看想到
房價高中歡迎，訓練不必傢俱一款快車，湖口可用。
<span class="dots">...</span>
<span class="moreText show" id="more">
性別印度一時部分連續家庭因為渠道發佈積分，處理器娛樂內部就要報名內部面
議趨勢台北基於體會並非其它，來電條款時間空氣合適傳奇塑膠毫不隱藏財產，
不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾，網咖博士閲讀本
類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼
相機一絲照片職業大部分，競爭階段採用經濟專區所說心靈國際適用信譽光碟容
易，留學管理員我的您可以學校同時房屋親愛的當前其他的，觀看之中部落格，
眼神面前暴力網頁課程權力輔助超過，重量只是放心無法忽然地上當你存在一般
二手本人水果，大會瀏。
</span>
<button class="moreButton">Read more</button>
</p>
</div>
</section>CSS
section{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
}
.text_container{
width: 50vw;
box-shadow: 5px 10px 18px #888888;
padding: 10px 20px;
}
.show{
display: none;
}
.moreButton{
cursor: pointer;
}
.moreButton:hover{
color: blue;
}再來就是JavaScript的部分：
- 為Read more按鈕新增監聽事件
- 當按下按鈕時，我希望
- 按鈕消失
- 原本隱藏的段落出現
- …字串消失
這三個需求的共通點是：只靠顯示或消失一個class：display: none就可以達成，所以我直接用querySelector選到這三個class後，再用toggle後就大功告成啦！
JavaScript
const moreButton = document.querySelector('.moreButton')
moreButton.addEventListener('click', function(){
document.querySelector('.moreText').classList.toggle('show')
document.querySelector('.moreButton').classList.toggle('show')
document.querySelector('.dots').classList.toggle('show')
})以下就是完成後的樣子！
如何實作Read more的按鈕？
快車熟悉很多人傳播台南房地產十年消除，下一頁有很多，欣賞一座版面認證條 件不過行情看看而在字元傳說答案，今後銀行，辦公室證券根據評分請問競爭表 演起點，適應內存出發很快則是男女偉大身體檢測笑容人口，灌水版本來看想到 房價高中歡迎，訓練不必傢俱一款快車，湖口可用。 … 性別印度一時部分連續家庭因為渠道發佈積分，處理器娛樂內部就要報名內部面 議趨勢台北基於體會並非其它，來電條款時間空氣合適傳奇塑膠毫不隱藏財產， 不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾，網咖博士閲讀本 類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼 相機一絲照片職業大部分，競爭階段採用經濟專區所說心靈國際適用信譽光碟容 易，留學管理員我的您可以學校同時房屋親愛的當前其他的，觀看之中部落格， 眼神面前暴力網頁課程權力輔助超過，重量只是放心無法忽然地上當你存在一般 二手本人水果，大會瀏。