jQuery實作文字超過1行、2行或規定的行數時自動加省略號的方法-js教程-PHP中文網

jQuery實作文字超過1行、2行或規定的行數時自動加省略號的方法

亚连

發布： 2018-05-28 15:56:39

原創

1927 人瀏覽過

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.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 pH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        while ($p.outerHeight() > pH) {
          $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        };
      });
    });
  </script>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    .figcaption{
      width: 300px;
      height: 50px;
      /*根据父元素的高度来添加省略号
      *可以任意设置显示的行数
      */
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <p class="figcaption">
    <p>
      You probably can&#39;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>
  </p>
</body>
<script>
</script>
</html>

登入後複製

#運行效果：