用JS限制字数,超出部分以省略号...显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .r-advInfo-itemText{ padding: 25px 20px; background: pink; color: #000; border-radius: 40px; width: 200px; } .r-advInfo-item p { margin-top: 10px; font-size: 14px; color: #000; line-height: 24px; margin-top:20px; } </style> </head> <body> <div class="r-advInfo-itemText"> <p id="qfr"></p> </div> <script> LimitNumber('只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字','qfr'); /*用js限制字数,超出部分以省略号...显示*/ function LimitNumber(txt,idName) { var str = txt; str = str.substr(0,20) + '...' ; var id=document.getElementById(idName); id.innerText=str; } </script> </body> </html>
代码的最终效果: