文字一行居中，两行增加省略号（不支持低版本浏览器）

最新推荐文章于 2022-10-27 17:35:26 发布

郭浩326

最新推荐文章于 2022-10-27 17:35:26 发布

阅读量280

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/guohao326/article/details/77727509

版权

jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
</head>
<style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
  .box {
    margin-top: 20px;
    height: 47px;
    width: 300px;
    font-size: 16px;
    border: 1px solid red;
  }
  .inbox {
    border: 1px solid green;
  }
</style>

<body>
<div class="box">
  <div class="inbox">
    测试数据测试数据测试数据
  </div>
</div>
<div class="box">
  <div class="inbox">
    测试数据测试数据测试数据测试数据测据测试数据
    测试数据测试数据测试数据测试数据测试数据测试
    数据测试数据测试数据
  </div>
</div>
</body>
<script type="text/javascript">
  $(function() {
    /*
     * 一定要注意先后顺序
     * 第一步先增加省略号
     */
    $(".box").each(function(i) {
      var divH = $(this).height();
      var $p = $(".inbox", $(this)).eq(0);
      while($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
      };
    });
    /*
     * 第二步 再改变行高
     * 两个顺序不要放反了
     */
    var inbox_len = $('.inbox').length;
    for(var i = 0; i < inbox_len; i++) {
      var text_h = $('.inbox').eq(i).height();
      console.log(text_h);
      if(text_h < 40) {
        //小于40是为了做判断 父元素div的高是47px
        $('.inbox').eq(i).css('line-height', '47px');
      }
    };

  });
</script>

</html>