js实现文章显示部分内容
直接贴代码啦，因为没什么要说的，直接就可以看懂
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <style> 10 11 p { 12 color: #666; 13 line-height: 30px; 14 } 15 .open { 16 position: relative; 17 18 } 19 .open button { 20 position: absolute; 21 left: 0; 22 top: -54px; 23 width: 100%; 24 height: 20px; 25 background: -webkit-linear-gradient(-100deg, rgba(255,255,255,0.19) 0%, #FFFFFF 100%); 26 text-align: center; 27 padding-top: 40px; 28 border: none; 29 color: #1777d9; 30 outline: none; 31 } 32 .open i { 33 display: inline-block; 34 width: 6px; 35 height: 6px; 36 border-left: 1px solid #1777d9; 37 border-bottom: 1px solid #1777d9; 38 transform: rotate(-45deg); 39 margin-left: 5px; 40 margin-bottom: 2px; 41 } 42 </style> 43 <body> 44 <div class="content"> 45 <p>日本钢铁企业则认为由于韩国汽车制造业工人的罢工，冷轧薄板库存增加，导致目前韩国冷轧薄板供过于求。韩国轧钢厂正在努力扩大冷轧薄板的出口，这就使日本钢铁企业必须重新考虑对韩国出口热轧卷的策略。日本钢铁企业认为三季度应该大量降低出口韩国的热轧卷数量。而且，日本目前出口到韩国的热轧卷价格在亚洲是最低的。日本方面认为三季度提价20美元/吨是必不可少的，谈判越艰难，日本钢铁企业越要减少三季度出口韩国的热轧卷数量。</p> 46 <div class="open"> 47 <button>登录查看全文<i></i></button> 48 </div> 49 </div> 50 </body> 51 <script> 52 var p = document.querySelector('p'); 53 var btn = document.querySelector('button'); 54 var allContent = p.innerHTML; 55 var partContentLength = allContent.length * 0.3; 56 57 p.innerHTML = allContent.substr(0, partContentLength) + '......'; 58 btn.onclick = function(){ 59 p.innerHTML = allContent; 60 btn.style.display = 'none' 61 } 62 </script> 63 </html>
