平時前端開發工作時，經常會需要對字元串進行截斷，比如新聞標題，需要把超出可視區域後需要進行截斷，如下圖：
小編我由主要負責後端開發，最開始是採用後端方法來實現字元串截斷，然後傳遞給前端人員使用。
但是這個方式有一個弊端，尤其是響應式的頁面，截取字數無法精確控制，比如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。
今天先寫到這裡，如果感覺對您有幫助，可以轉發一下，後續有時間再分享一下前端技巧給大家。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/275438.html
微信掃一掃 
支付寶掃一掃 