关于客户端浏览器界面文字内容溢出用省略号表示方法
2015-08-22 15:38
721 查看
在实际的项目中,由于客户端浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了。
详见此插件用法的链接。
在本教程中,您将看到如何使用 Bootstrap Popover,以及如何使用一些可用选项进行定制。
详见此插件用法的链接。
参考:
1.《用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容》 如花smile
2.《用CSS截断字符串》 如花smile
3.《关于文字内容溢出用点点点(…)省略号表示》 张鑫旭 2009年9月
4.“菜鸟教程”网站:http://www.runoob.com
使用CSS截断字符串方法
CSS中有个属性叫做text-overflow:ellipsis。说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比。<div style="width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>
使用JQuery(Javascript)方法
通过在界面控件中,自定义属性方式,截取字符串添加省略号方案来解决,例如参考网上资料,使用“limit”自定义属性方案,基于Bootstrap代码如下所示:<html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script> $('table').tooltip(); jQuery.fn.limit=function(){ var self = $("[limit]"); self.each(function(){ var objString = $(this).text(); var objLength = $(this).text().length; var num = $(this).attr("limit"); if(objLength > num){ $(this).attr("title",objString); objString = $(this).text(objString.substring(0,num) + "..."); } }) } $(function(){ $("[limit]").limit(); }) </script> <body> <h1>你好,世界!</h1> <table> <tr> <td class="centerContentTd" nowrap="nowrap" title="这里是全部内容" limit="8">这里显示截取后的内容长度大于8将用省略号代替</td> </tr> </table> </body> </html>
关于被截断字符串的浮动提示
使用“Bootstrap 工具提示(Tooltip)插件”
当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。详见此插件用法的链接。
使用“Bootstrap Popover(弹出框)”
Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。在本教程中,您将看到如何使用 Bootstrap Popover,以及如何使用一些可用选项进行定制。
详见此插件用法的链接。
参考:
1.《用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容》 如花smile
2.《用CSS截断字符串》 如花smile
3.《关于文字内容溢出用点点点(…)省略号表示》 张鑫旭 2009年9月
4.“菜鸟教程”网站:http://www.runoob.com
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Web布局连载——两栏固定布局(五)
- bootstrap初试进度条
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法