文字截斷

在資料庫獲取一些新聞時，有時文字過多，為了不破壞佈局，常常需要只顯示一部分，這是需要用到文字截斷的功能。雖然css也可以實現，但是限制太多

css實現需要text-overflow:ellipsis;overflow:hidden;white-space:nowrap;三個屬性，另外還需要文本標簽寬度，這幾個缺一不可。用jq控制就輕鬆許多。

HTML：

<div limit="10">
    我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話我是一段話
</div>

jq：

jQuery.fn.limit=function(){  
        var self = $("[limit]");  
        self.each(function(){  
            var objString = $(this).text();  
            var objLength = $(this).text().length;  
            var num = $(this).attr("limit");  
            if(objLength > num){  
                $(this).attr("title",objString);  
                objString = $(this).text(objString.substring(0,num) + "...");  
            }  
        })  
    }  
    $(function(){  
        $("[limit]").limit();  
    })  

用jq實現文字截斷只需引入jq和這段代碼，然後在需要截斷元素標簽上加上limit="XX"，XX是要顯示的文字個數，即可。