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

HTML內(nèi)容，h2中的文本通過(guò)jQuery控制：

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

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

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

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

jQuery寫(xiě)法為：

var str = '這是一個(gè)測(cè)試內(nèi)容，更多其它內(nèi)容請(qǐng)查看作者博客！';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ù)控件的當(dāng)前寬度來(lái)決定顯示的字符數(shù)，這樣既不會(huì)撐爆控件，又可以最大程度的顯示字符串。

以上所述是小編給大家介紹的jQuery控制控件文本的長(zhǎng)度，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！