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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
解决Layui数据表格的宽高问题
Sep 28 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
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python装饰器知识点补充
2018/05/28 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
运动会解说词50字
2014/01/18 职场文书
询价采购方案
2014/06/09 职场文书
会议欢迎标语
2014/06/30 职场文书
市场营销计划书范文
2015/01/16 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python