快捷導(dǎo)航

jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法

更新時間：2018年03月28日 10:16:46 作者：郭浩326

這篇文章主要介紹了jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法,涉及jQuery針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>m.fzitv.net jQuery自動添加省略號</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".figcaption").each(function (i) {
        var divH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        while ($p.outerHeight() > divH) {
          $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        };
      });
    });
  </script>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    .figcaption{
      width: 300px;
      height: 50px;
      /*根據(jù)父元素的高度來添加省略號
      *可以任意設(shè)置顯示的行數(shù)
      */
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="figcaption">
    <p>
      You probably can't do it (currently?) without a fixed-width font like Courier. With
      a fixed-width font every letter occupies the same horizontal space, so you could
      probably count the letters and multiply the result with the current font size in
      ems or exs. Then you would just have to test how many letters fit on one line, and
      then break it up.</p>
  </div>
</body>
<script>
</script>
</html>

運行效果：