关于客户端浏览器界面文字内容溢出用省略号表示方法

在实际的项目中,由于客户端浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了。

使用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

你可能感兴趣的:(html,jquery,css,bootstrap,tooltip)