jQueryはテキストが1行、2行、または指定行数を超えた場合に自動的に省略記号を追加するメソッドを実装します-jsチュートリアル-php.cn

jQueryはテキストが1行、2行、または指定行数を超えた場合に自動的に省略記号を追加するメソッドを実装します

亚连

リリース： 2018-05-28 15:56:39

オリジナル

1970 人が閲覧しました

この記事では、テキストが 1 行、2 行、または指定された行数を超えた場合に自動的に省略記号を追加する jQuery の方法を主に紹介します。これには、ページ要素の属性の動的な操作に関連する jQuery の実装スキルが含まれます。この記事

テキストが1行、2行、または指定行数を超えた場合に、jQueryで自動的に省略記号を追加する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

<!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>

ログイン後にコピー

操作効果: