码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-06-09 19:13:22      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:图片   选项   pac   jquer   nts   百分比   views   pen   plugins   

在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过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

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

标签:图片   选项   pac   jquer   nts   百分比   views   pen   plugins   

原文地址:http://www.cnblogs.com/gavanwanggw/p/6973161.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!