jQuery implements a method to automatically add ellipsis when the text exceeds 1 line, 2 lines or a specified number of lines-JS Tutorial-php.cn

jQuery implements a method to automatically add ellipsis when the text exceeds 1 line, 2 lines or a specified number of lines

亚连

Release： 2018-05-28 15:56:39

Original

1982 people have browsed it

This article mainly introduces jQuery's method of automatically adding ellipsis when the text exceeds 1 line, 2 lines or the specified number of lines. It involves jQuery's implementation skills related to dynamic operation of page element attributes. Friends in need can refer to the following

The example in this article describes jQuery's method of automatically adding ellipses when the text exceeds 1 line, 2 lines, or a specified number of lines. Share it with everyone for your reference, the details are as follows:

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

Copy after login

Running effect:

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

AJAX Encapsulated Class Usage Guide

AJAX Elementary Tutorial Getting to Know AJAX

Detailed explanation of browser and server interaction in Ajax

# #

The above is the detailed content of jQuery implements a method to automatically add ellipsis when the text exceeds 1 line, 2 lines or a specified number of lines. For more information, please follow other related articles on the PHP Chinese website!