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

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

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

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