废话不多说，直接看效果图~
实现的思路：
文字收缩的时候，给它下面添加一个渐变的遮罩层，当展开的时候，把那个遮罩层给去掉。
主要代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本模糊</title> <style type="text/css"> body{color:#555;font-size:16px;line-height:1.7;word-wrap:break-word;font-family:'Microsoft Yahei';-webkit-tap-highlight-color:rgba(0,0,0,0)} .question-description{position:relative;max-height:5.1em;margin-top:5px;overflow:hidden;width:370px} .question-description.is-expanded{max-height:none} .question-mask{position:absolute;top:0;width:100%;height:100%;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.5),#fff);background-image:linear-gradient(180deg,hsla(0,0%,100%,.5),#fff)}//主要的样式代码 .expandBtn{position:absolute;right:0;bottom:0;padding:4px 0 0 5px;color:#999;background-color:#fff;cursor:pointer;line-height:1.5;border-radius:4px;border:0 none;font-size:16px} </style> </head> <body> <div class="question-description"> <div class="rich-text">比如：吃喝拉撒睡怎么照顾、怎么逗它比较好、上班的话猫猫在家怎么办、怎么训练、卫生健康上有什么要注意的、要不要打疫苗、什么时候打、养猫需要怎样的心态。。。。。新手求经验，养过猫猫的都来说点经验呗~</div> <div class="question-mask"> <button class="expandBtn">查看问题描述</button> </div> </div> <script type="text/javascript"> var oBtn = document.getElementsByClassName('expandBtn'); var oContent = document.getElementsByClassName('question-description'); var oMask = document.getElementsByClassName('question-mask'); oBtn[0].onclick = function(){ oContent[0].className = 'question-description is-expanded'; oMask[0].parentNode.removeChild(oMask[0]);//去掉遮罩层 } </script> </body> </html>