這是入行這么久來第一次寫博文，所以在解決問題之前把開博客的原因也寫在這兒，在項目開發中遇到問題-->依靠經驗，進行思考造輪子，網上各種查閱相關問題-->終於把問題解決了，但是有時候項目的時間緊迫，在遇到類似的問題，只是有大概的印象，有的不能及時解決，所以決定在此做個記錄，好記性不如爛筆頭，同樣好記性不如破筆記，整理總結一下畢竟印象會深刻很多。
很多前端認為前端的技術更新太快，跟不上時代的步伐怎么好意思說自己是專業的前端工程師，古語雲：“三天不學習就要落后”，古語又雲：“落后就要挨打”，不想總是被打的，所以在學習的同時也可以通過博文來記錄自己每天的學習成果來督促自己進步，每天進步一點點，總是會越來越專業，工作也就越來越順手，少了不必要的加班，多了每個月的薪資，（不敢往下想了^_^），生活真是越來越美好。
再此，程序員都是很有開源精神的，希望一起探討來提高技術解決問題，我也希望我在項目中碰到的問題能幫助你解決類似的問題，好了不多扯了，開始今天的問題。
需求：一行文字超出的部分隱藏並且加以...代替；
這個需求初看很簡單，可以用CSS和JS兩種方法解決：
在不處理的情況下，上代碼
<style> p{ width: 50%; background-color: skyblue; } </style> <body> <p>有時候，我多么希望能有一雙睿智的眼睛能夠看穿我，能夠明白了解我的一切，包括所有的斑斕和荒蕪。那雙眼眸能夠穿透我的最為本質的靈魂，直抵我心靈深處那個真實的自己，她的話語能解決我所有的迷惑，或是對我的所作所為能有一針見血的評價。</p> </body>
上圖
1.css解決：
上代碼
<style> p{ width: 50%; background-color: skyblue; /*下面是添加內容*/ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style>
上圖
2.js解決（感覺能用css解決的就盡量別麻煩js了）
上代碼
<script> window.onload=function(){ var p=document.getElementById('content'); console.log(p.innerText.length); p.innerText=p.innerText.length>40?p.innerText.substr(0,40).concat('...'):p.innerText; } </script>
上圖
（缺點就是截取長度得試着來，因為長度不同）
需求增加：你給我隱藏了，不可能不讓我看詳細情況吧？？-->所以點下在顯示詳情
解決：
這次就得JS了 ：
1.如果隱藏是通過css添加的那么通過以下代碼可以實現，上代碼：
p.onclick=function(){ p.style.textOverflow='clip'; p.style.whiteSpace='normal'; }
2.如果是通過js 的substr()截取的那么截取之前應該利用data屬性把全部的文本存到當前的元素，上代碼；
p.dataset.content=p.innerText; p.innerText=p.innerText.length>40? p.innerText.substr(0,40).concat('...'):p.innerText; p.onclick=function(){ p.innerText=p.dataset.content; }
這樣就把需求解決了，雖然需求簡單，但是可以給我們提示，在遇到問題的同時是不是可以通過多種方法來解決。