jQuery控制控件文本的长度
来源:互联网 发布:新手开淘宝装修店铺 编辑:程序博客网 时间:2024/06/05 07:03
文章作者:Tyan
博客:noahsnail.com | CSDN | 简书
在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; }}
上面的做法是根据控件的当前宽度来决定显示的字符数,这样既不会撑爆控件,又可以最大程度的显示字符串。
0 0
- jQuery控制控件文本的长度
- C#控件控制输入文本长度
- css下的文本长度控制
- 控制fckeditor文本长度
- jquery控制textarea长度
- 用CSS控制文本长度
- 利用CSS控制文本长度
- 利用CSS控制文本长度
- 如何在EditText中控制输入文本的长度
- 基于Jquery的文本提示控件 poshytip
- Jquery控制My97DatePicker控件的日期格式
- Jquery控制My97DatePicker控件的日期格式
- css控制文本长度(二)
- CSS 样式 控制 文本 框 长度
- 控制html文本域输入长度
- 通过CSS控制文本长度示例
- js控制文本框自动适应文本长度
- input 文本框控制文本输入长度
- SQL实现查找最近一周、一个月、三个月的数据
- 第十二周 项目2-操作用邻接表存储的图
- uva12563
- C++入门(二)C++基本知识
- 菜鸟录之错题
- jQuery控制控件文本的长度
- Android数据存储的五种方式
- java基础---I/O流--字节流(2)
- Unity客户端与后台通信
- Android 用 adb forword + Tcpdump + Wireshark 实时抓包的方法
- 链栈 链队列 share
- ListView添加HeaderView出现Cannot add header view to list -- setAdapter has already been called.
- v4l2-ctl 控制命令
- Activity的生命周期记录