jQuery控制控件文本的長度的操作方法

更新時間：2016年12月05日 11:42:54 投稿：mrr

這篇文章主要介紹了jQuery控制控件文本的長度的操作方法,非常不錯，具有參考借鑒價值，需要的朋友參考下吧

在Web項目開發(fā)中，有時候會碰到這樣一個問題，控件被文本內容撐爆了，但是怎么控制控件文本的的內容呢？可能有的人會用Javascript中的substring對控件顯示的文本進行控件，但由于字母大小寫，漢字，其它語言等每個字符的大小是不一樣的，這導致了同樣是substring(0, 10)，有的內容小，有的內容大，而想要使用CSS控制控件的寬度時，有時候并不起作用，除非你很精通CSS，否則很難通過CSS控制控件中的文本內容，下面的方法可以解決這個問題。

HTML內容，h2中的文本通過jQuery控制：

<h2 class="test"></h2>

例如，h2的內容為這是一個測試內容，更多其它內容請查看作者博客！，但控件不夠長，直接放會撐爆控件，想要顯示部分內容，剩下的內容用...表示。如果h2控件的樣式已由CSS控制，則可以這樣做：

HTML內容修改，span控件的CSS樣式?jīng)]有被控制：

<h2 class="test"><span class="test_span"></span></h2>

jQuery寫法為：

var str = '這是一個測試內容，更多其它內容請查看作者博客！';
var threshold = 100;
for (var i = 1; i < str.length; i++) {
var subStr = str.substring(0, i);
$('.test_span').text(subStr);
if($('.test_span').width() > threshold) {
$('.test_span').text(subStr + '...');
break;
}
}

上面的做法是根據(jù)控件的當前寬度來決定顯示的字符數(shù)，這樣既不會撐爆控件，又可以最大程度的顯示字符串。

以上所述是小編給大家介紹的jQuery控制控件文本的長度，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: