<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • js截取第一個字符串(javascript截取字符串的方法)


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

    前端技巧:Javascript和Css截取字符串的方法比較

    小編我由主要負責后端開發,最開始是采用后端方法來實現字符串截斷,然后傳遞給前端人員使用。

    但是這個方式有一個弊端,尤其是響應式的頁面,截取字數無法精確控制,比如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。

    今天先寫到這里,如果感覺對您有幫助,可以轉發一下,后續有時間再分享一下前端技巧給大家。

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费