jQuery控制控件文本的長度的操作方法
在Web項(xiàng)目開發(fā)中，有時(shí)候會(huì)碰到這樣一個(gè)問題，控件被文本內(nèi)容撐爆了，但是怎么控制控件文本的的內(nèi)容呢？可能有的人會(huì)用Javascript中的substring對控件顯示的文本進(jìn)行控件，但由于字母大小寫，漢字，其它語言等每個(gè)字符的大小是不一樣的，這導(dǎo)致了同樣是substring(0, 10)，有的內(nèi)容小，有的內(nèi)容大，而想要使用CSS控制控件的寬度時(shí)，有時(shí)候并不起作用，除非你很精通CSS，否則很難通過CSS控制控件中的文本內(nèi)容，下面的方法可以解決這個(gè)問題。
HTML內(nèi)容，h2中的文本通過jQuery控制：
<h2 class="test"></h2>
例如，h2的內(nèi)容為這是一個(gè)測試內(nèi)容，更多其它內(nèi)容請查看作者博客！，但控件不夠長，直接放會(huì)撐爆控件，想要顯示部分內(nèi)容，剩下的內(nèi)容用...表示。如果h2控件的樣式已由CSS控制，則可以這樣做：
HTML內(nèi)容修改，span控件的CSS樣式?jīng)]有被控制：
<h2 class="test"><span class="test_span"></span></h2>
jQuery寫法為：
var str = '這是一個(gè)測試內(nèi)容，更多其它內(nèi)容請查看作者博客！';
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)前寬度來決定顯示的字符數(shù)，這樣既不會(huì)撐爆控件，又可以最大程度的顯示字符串。
以上所述是小編給大家介紹的jQuery控制控件文本的長度，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery zTree插件快速實(shí)現(xiàn)目錄樹
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件快速實(shí)現(xiàn)目錄樹，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
jquery實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為
本文主要介紹了jquery鍵盤事件實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為的方法，這種使用場景為當(dāng)首頁有幾個(gè)鏈接需要選擇的時(shí)候，使用鍵盤就可以進(jìn)行觸發(fā)行為。下面跟著小編一起來看下吧2017-03-03
jQuery .attr()和.removeAttr()方法操作元素屬性示例
本文為大家詳細(xì)介紹下如何使用jQuery的.attr()和.removeAttr()方法讀取，添加，修改，刪除元素的屬性，不會(huì)的朋友可以參考下哈，希望對大家有所幫助2013-07-07
jQuery實(shí)現(xiàn)網(wǎng)頁抖動(dòng)的菜單抖動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)頁抖動(dòng)的菜單抖動(dòng)效果,鼠標(biāo)滑過菜單項(xiàng)可見到菜單項(xiàng)的抖動(dòng)效果,涉及jquery鼠標(biāo)事件及頁面元素樣式動(dòng)態(tài)操作的技巧,需要的朋友可以參考下2015-08-08
基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
這篇文章主要介紹了基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides的相關(guān)資料,需要的朋友可以參考下2015-09-09
今天小編就為大家分享一篇通過jquery的ajax請求本地的json文件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
jQuery ajax動(dòng)態(tài)生成table功能示例
這篇文章主要介紹了jQuery ajax動(dòng)態(tài)生成table功能,結(jié)合具體實(shí)例形式分析了jQuery基于ajax數(shù)據(jù)交互動(dòng)態(tài)創(chuàng)建table表格的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
Jquery實(shí)現(xiàn)顯示和隱藏的4種簡單方式
顯示和隱藏的效果想必大家都有見到過吧，其實(shí)很簡單，通過jquery便可輕松實(shí)現(xiàn)，下面為大家整理了4種方式，大家可以根據(jù)需求自由選擇2013-08-08
jquery序列化表單以及回調(diào)函數(shù)的使用示例
使用jQuery提供的表單序列化方法可以很好的解決JSP表單中一個(gè)個(gè)傳值的問題，下面有個(gè)示例，大家可以參考下2014-07-07
jquery實(shí)現(xiàn)頁面常用的返回頂部效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)頁面常用的返回頂部效果代碼，感興趣的小伙伴們可以參考一下2016-03-03