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


Posted in Javascript onDecember 05, 2016

在Web项目开发中,有时候会碰到这样一个问题,控件被文本内容撑爆了,但是怎么控制控件文本的的内容呢?可能有的人会用Javascript中的substring对控件显示的文本进行控件,但由于字母大小写,汉字,其它语言等每个字符的大小是不一样的,这导致了同样是substring(0, 10),有的内容小,有的内容大,而想要使用CSS控制控件的宽度时,有时候并不起作用,除非你很精通CSS,否则很难通过CSS控制控件中的文本内容,下面的方法可以解决这个问题。

HTML内容,h2中的文本通过jQuery控制:

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

例如,h2的内容为这是一个测试内容,更多其它内容请查看作者博客!,但控件不够长,直接放会撑爆控件,想要显示部分内容,剩下的内容用...表示。如果h2控件的样式已由CSS控制,则可以这样做:

HTML内容修改,span控件的CSS样式没有被控制:

<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;
}
}

上面的做法是根据控件的当前宽度来决定显示的字符数,这样既不会撑爆控件,又可以最大程度的显示字符串。

以上所述是小编给大家介绍的jQuery控制控件文本的长度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
浅析Ajax语法
Dec 05 #Javascript
jQuery的事件预绑定
Dec 05 #Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 #Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 #Javascript
微信小程序 底部导航栏目开发资料
Dec 05 #Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 #Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 #Javascript
You might like
laravel 数据验证规则详解
2019/10/23 PHP
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
原生js获取left值和top值的三种方法
2017/08/02 Javascript
深入理解Promise.all
2018/08/08 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python 进程的几种创建方式详解
2019/08/29 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Python matplotlib实时画图案例
2020/04/23 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
项目总经理岗位职责
2014/02/14 职场文书
市场推广策划方案
2014/06/02 职场文书
收银员岗位职责范本
2015/04/07 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
Minikube搭建Kubernetes集群
2022/03/31 Servers