jQuery控制控件文本的长度的操作方法
在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控制控件文本的长度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JQuery获取文本框中字符长度的代码
趁我写例子这点时间有两个人回答了 呵呵 刚才试验过了 看下例子吧 JS 方法: 复制代码 代码如下: <script type="text/javascript"> // 得到字符串的真实长度(双字节换算为两个单字节) function getStrActualLen(sChars) { //sChars.replace(/[^\x00-\xff]/g,"xx").length/1024+"字节"; //Math.round(sCha
-
jQuery控制控件文本的长度的操作方法
在Web项目开发中,有时候会碰到这样一个问题,控件被文本内容撑爆了,但是怎么控制控件文本的的内容呢?可能有的人会用Javascript中的substring对控件显示的文本进行控件,但由于字母大小写,汉字,其它语言等每个字符的大小是不一样的,这导致了同样是substring(0, 10),有的内容小,有的内容大,而想要使用CSS控制控件的宽度时,有时候并不起作用,除非你很精通CSS,否则很难通过CSS控制控件中的文本内容,下面的方法可以解决这个问题. HTML内容,h2中的文本通过jQuery控
-
Jquery获得控件值的三种方法总结
一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu
-
jQuery Html控件基本操作(日常收集整理)
闲来无聊,收集总结一下jQuery常用操作,希望对新手有用. 基于jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&q
-
ANGULARJS中使用JQUERY分页控件
首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控
-
设置jquery UI 控件的大小方法
如下所示: #ui-datepicker-div { font-size: 12px; } 以上这篇设置jquery UI 控件的大小方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
自己动手写的jquery分页控件(非常简单实用)
最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo
-
jquery 分页控件实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jquery分页控
-
jQuery树形控件zTree使用小结
0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点 •最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.
-
ASP.NET MVC引入JQUERY JQRTE控件
主要步骤如下: 1,在asp.net mvc项目中引入jqrte类库,声明辅助类用于存储服务器端上载文件的信息 复制代码 代码如下: public class ViewDataUploadFilesResult { public string message { get; set; } //public int Length { get; set; } public string imagepath { get; set; } public string error { get; set; }
-
jQuery 相关控件的事件操作分解
今天突然对他的事件产生了兴趣,先前也碰到过,也没整理,今天有空就弄一下咯. 对于控件的事件,jQuery已经提供了丰富的方法,包括绑定.一次绑定.触发等,阿拉今早看看叫一哪能用额伐,大虾路古就可以了. jQuery的绑定事件非常方便,有bind.live.one还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要 复制代码 代码如下: $("#testButton").click(function() { alert("
随机推荐
- windows7下使用MongoDB实现仓储设计
- 基于js原生和ajax的get和post方法以及jsonp的原生写法实例
- jQuery Ajax使用FormData对象上传文件的方法
- win2008下IIS7、IIS7.5 配置ASP+ACCESS使用环境
- 如何抽象一个Vue公共组件
- php简单隔行变色功能实现代码 原创
- 作为PHP程序员应该了解MongoDB的五件事
- php 如何禁用eval() 函数实例详解
- Advanced Pagination for MySQL(mysql高级分页)
- mysql 5.6.14主从复制(也称mysql AB复制)环境配置方法
- 将DataTable转换成List<T>实现思路及示例代码
- linux文本分析awk基础命令介绍(8)
- 理解jquery事件冒泡
- jQuery获取节点和子节点文本的方法
- node.js实现回调的方法示例
- js判断一点是否在一个三角形内
- Android ListView数据绑定显示的三种解决方法
- .NET单点登陆的实现方法及思路
- JS实现运动缓冲效果的封装函数示例
- 在vue里使用codemirror遇到的问题