平時前端開發工作時,經常會需要對字符串進行截斷,比如新聞標題,需要把超出可視區域后需要進行截斷,如下圖:


小編我由主要負責后端開發,最開始是采用后端方法來實現字符串截斷,然后傳遞給前端人員使用。
但是這個方式有一個弊端,尤其是響應式的頁面,截取字數無法精確控制,比如pc端可視區域可以顯示150個字符,但是手機端屏幕最多只能顯示20個字符,所以通過后端來控制字符數是非常爛的解決方案,最好的解決辦法是通過前端方式來截斷字符串,下面分別用javascript和css的方式來實現。
先看一下html部分
<div class="title"> 為什么要制作高端的網站?高端網站建設價格為什么越來越高? </div>
下面分別針對這行html進行截斷操作。
1、javascript方式。
先封裝一個截取字符串的方法,代碼如下:
<script> String.prototype.left = function (len) //左邊截取字段數 { var str = this; if (isNaN(len) || len == null) { len = str.length; } else { if (parseInt(len) < 0 || parseInt(len) > str.length) { len = str.length; } } return str.substr(0, len); } </script>
然后再頁面中采用jquery方式調用:
<script type="text/javascript"> $(function () { var $title=(".title"); var txt= $title.html().left(50); //截取前50個字符 $title.html(txt); //重新 }); </script>
這種方式可以實現字符串的截取,但是這種方法也不理想,pc端和手機端截取字數還是需要單獨根據瀏覽器類型來定義。
2、css控制,這個是最推薦的解決方案
定義一個css類:
.title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
text-overflow: ellipsis; 這句意思是超出可視區域后顯示三個點…,如果只想截斷,可以改為: text-overflow:clip。
今天先寫到這里,如果感覺對您有幫助,可以轉發一下,后續有時間再分享一下前端技巧給大家。
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。
發表評論
請登錄后評論...
登錄后才能評論