Home > Article > Web Front-end > jQuery implements a method to automatically add ellipsis when the text exceeds 1 line, 2 lines or a specified number of lines

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

亚连Original: 2018-05-28 15:56:391973browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement drop-down box function in vue without using selectNext article：How to implement drop-down box function in vue without using select

See more

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

Related articles