javascript 實現文本使用省略號替代
實現效果圖：
如果圖片不清晰,建議放大瀏覽器的尺寸進行查看
1.這里是配合jQuery來進行替換的,所以jquery還是必備的,畢竟是輕量級,而且對各大的瀏覽器兼容性也好。所以開始頁面引入jquery文件。
2.在頁面添加樣式。
<style type="text/css"> .text { background: #EEE;/*方便演示設置顏色*/ /*width: 410px;*/ height: 40px; /*高度是必須的,用來判斷什么時候用...替代*/ margin: 0; line-height: 20px; font-size: 14px; } </style>3.我這里測試使用的文本內容如下,讀者可以自行設置。
<div class="text"> <p> www.nowcoder.com<br /> <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 </p> </div> <div class="text"> <p> www.nowcoder.com<br /> <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 <a >牛客網</a>良心網 程序員刷題必備網站 </p> </div>
4.在頁面的末尾部分加入如下js代碼,在頁面加載完畢后,進行換行操作。
<script type="text/javascript"> $(document).ready(function () { wrapText(); }); function wrapText() { $(".text").each(function (i) { var divH = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(/s)*([a-zA-Z0-9]+|/W)(/././.)?$/, "...")); } }); } </script>需要注意的是上面的js代碼使用的文本里面設置的class名稱.
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
