在实际的项目中，因为client浏览器文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其它标签，下同）区域的情况。此时比較好的做法就是当文字超过限定的div宽度后自己主动以省略号（…）显示，这样。依照习惯，人们都会知道这儿有文字被省略了。

使用CSS截断字符串方法

CSS中有个属性叫做text-overflow:ellipsis。

说明：长处是内容能够为不论什么HTML元素。包含超链接和图片等，在IE6中还会在结尾自己主动显示省略号。缺点是必须指定宽度数值。而且宽度不能是百分数，否则在IE中会被觉得是字符总长的百分比。

  1. <div style="width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 随意长度的字符串 </div>

使用JQuery（Javascript）方法

通过在界面控件中。自己定义属性方式，截取字符串加入省略号方案来解决。比如參考网上资料。使用“limit”自己定义属性方案。基于Bootstrap代码例如以下所看到的：

  1. <html lang="zh-CN">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <!-- 上述3个meta标签*必须*放在最前面。不论什么其它内容都*必须*尾随其后！ -->
  7.     <title>Bootstrap 101 Template</title>
  9.     <!-- Bootstrap -->
  10.     <link href="css/bootstrap.min.css" rel="stylesheet">
  12.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  13.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14.     <!--[if lt IE 9]>
  15.       <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16.       <script src="js/respond.min.js"></script>
  17.     <![endif]-->
  18.   </head>
  19.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  20.   <script src="js/jquery.js"></script>
  21.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  22.   <script src="js/bootstrap.min.js"></script>
  23.   <script>
  24.     $('table').tooltip();  
  26.     jQuery.fn.limit=function(){
  27.         var self = $("[limit]");
  28.         self.each(function(){
  29.             var objString = $(this).text();
  30.             var objLength = $(this).text().length;
  31.             var num = $(this).attr("limit");
  32.             if(objLength > num){
  33.                 $(this).attr("title",objString);
  34.                 objString = $(this).text(objString.substring(0,num) + "...");
  35.             }
  36.         })
  37.     }
  38.     $(function(){
  39.         $("[limit]").limit();
  40.     })  
  42.   </script>
  43.   <body>
  44.     <h1>你好，世界！
  46. </h1>
  48.     <table>
  49.         <tr>
  50.             <td class="centerContentTd" nowrap="nowrap" title="这里是所有内容" limit="8">这里显示截取后的内容长度大于8将用省略号取代</td>
  51.         </tr>
  52.     </table>
  53.   </body>
  54. </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

关于client浏览器界面文字内容溢出用省略号表示方法的更多相关文章

  1. css如何实现多行文本时,内容溢出,出现省略号

    一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...

  2. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  3. jQuery关于文字内容溢出用点点点(…)省略号表示

    1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each( ...

  4. jquery控制文字内容溢出用点点点(…)省略号表示

    jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text( ...

  5. 列表中文字太多 溢出使用省略号css方法

    我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替,实现以下效果: 文字太太太太多多多啦...... 这个不多. html:这是个列表.ul/ol都行. <ul> & ...

  6. Discuz X3游客看小图功能导致文字内容隐藏的【修复方法】

    如果帖子内容以图片开始,并且开启了游客看小图功能,那么图片下面的文字也会被隐藏,这是不科学的(在图片上边的文字不会被隐藏)查看DZ源代码,发现是程序猿疏忽漏掉了</div> 下边1314学 ...

  7. css实现文字内容超出显示省略号

    white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellip ...

  8. js内容溢出用省略号（...）表示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. css实现文字过长显示省略号的方法

    <div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...

随机推荐

  1. shell应用之批量添加用户实例

    这里要实现功能介绍 读取一个用户列表文件 给列表中的用户添加随机密码需要包含大小写字符和数字 保存对应的用户和密码文件 这些用户属于同个用户组 1.列表文件 [root@mail ~]# cat li ...

  2. WPS for Linux使用测评

    从去年有WPS for Linux的消息到现在,Linux 版的WPS Office在经过一系列的alpha版本之后终于迎来了Beta版本.笔者也是第一时间下载安装,WPS 文字.WPS 演示和WPS ...

  3. css与jquery、图标字体

    *)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...

  4. 作诗(si)[分块]

    题目描述 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M次,每次只阅读 ...

  5. 【转】 HTML解析：基于XPath的C#类库HtmlAgiliytyPack

    [转] HTML解析:基于XPath的C#类库HtmlAgiliytyPack 最近处于毕业设计开始阶段,前期工作需要去国外的一些专业数据库网站比对一些所需TF家族信息,为了快捷方便,想到用程序去帮助 ...

  6. C++对象模型——效率有了,弹性呢(第七章)

    7.4    效率有了,弹性呢 传统的C++对象模型提供有效率的运行期支持.这份效率,再加上与C之间的兼容性,造成了C++的广泛被接受度.然而,在某些领域方面,像是动态共享函数库(dynamicall ...

  7. iOS 卖票中多线程分析;

    注意:(主要一个加锁机制)

  8. 惊叹计算机运行速度的提升---以n Queens 问题为例

    1 介绍 实现了书<Data Structures and Program design in C++>(Robert L. Kruse and Alexander J. Ryba, 20 ...

  9. 关于es6中对象的扩展

    1.Object.is() es5比较两个值是否相等,只有两个运算符,相等(==) 和 严格相等(===),他们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0 等于 -0.es6提 ...

  10. POJ 1986 裸的LCA

    思路:搞了一发链剖 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...