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

最新推荐文章于 2022-04-19 20:58:08 发布

肖永威

最新推荐文章于 2022-04-19 20:58:08 发布

阅读量2.6k

点赞数

分类专栏：软件开发技术文章标签： css html bootstrap jquery tooltip

本文链接：https://blog.csdn.net/xiaoyw71/article/details/47856763

版权

软件开发技术专栏收录该内容

62 篇文章 3 订阅

订阅专栏

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