Home Web Front-end JS Tutorial Add ellipses when the text exceeds the specified number of lines

Add ellipses when the text exceeds the specified number of lines

May 08, 2018 am 11:51 AM
Increase Number of lines Regulation

This time I will introduce to you how to add ellipses when the text exceeds the specified number of lines, and what are the precautions for adding ellipsis when the text exceeds the specified number of lines. The following is a practical case, let's take a look.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>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'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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of Vue operation custom dynamic component method

How to use JS to verify E-mail format

JS gets url parameters and sends Json format POST request case details

The above is the detailed content of Add ellipses when the text exceeds the specified number of lines. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Take stock of common code statistics tools in Linux! Take stock of common code statistics tools in Linux! Feb 19, 2024 pm 02:42 PM

In Linux systems, code statistics tools play a very important role. They can help developers understand the size and complexity of the code base, so as to better manage and optimize projects. So what are the common Linux code statistics tools? The following is a detailed introduction. In Linux development, there are some common code statistics tools to help developers understand the code size and structure. These tools can provide information such as the number of lines of code, number of files, etc. 1. Cloc: Cloc is a cross-platform command line tool, used to count the number of lines, comment lines and blank lines of source code, and supports multiple programming languages. SLOCCount is a flexible and customizable line-of-code counting tool that can analyze source code files in the project directory.

Commonly used numpy methods and precautions to increase dimensions Commonly used numpy methods and precautions to increase dimensions Jan 26, 2024 am 08:38 AM

Numpy is a commonly used scientific computing library in Python, providing a wealth of mathematical functions and powerful array operation functions. In practical applications, sometimes we need to expand or adjust the dimensions of an array. This article will introduce commonly used methods of increasing dimensions in numpy and provide detailed code examples. 1. Use the reshape method. The reshape method in numpy allows us to modify the dimensions of the array without changing the number of elements in the array. The specific usage is as follows: importnumpy

Understand the policies and regulations surrounding Windows 10 activation keys Understand the policies and regulations surrounding Windows 10 activation keys Mar 28, 2024 pm 12:30 PM

Windows 10, as an operating system launched by Microsoft, is widely used around the world. In order to use Windows 10 system normally, users usually need to activate the corresponding product key. The policies and regulations related to Windows 10 activation keys are also one of the focuses of people's attention. First of all, the Windows 10 activation key is an important set of codes used to verify the legitimacy of the user's system. For the vast majority of users, activation comes with purchasing a genuine Windows 10 system.

How to set the number of lines in word How to set the number of lines in word Mar 19, 2024 pm 06:20 PM

When we typeset word documents, we sometimes have to comply with many formatting requirements. For example, when we write papers or other more formal documents, there are many setting requirements, including requirements for fonts, font sizes, line spacing, etc. Sometimes There are even some regulations on the number of lines per page. So how do we set the number of word lines? Let’s try to practice it below, I hope it will help or inspire you! First, we need to create a new Word document and open it. In order to set the number of rows per page, we need to click on the &quot;Page Layout&quot; tab at the top of the page. Next, in the lower right corner we will see an icon that looks like a small square, which can be seen in the red box. The schematic is shown below. 2. After that, click the small square sign to pop up the [Page

How to use MongoDB to add, modify, and delete data How to use MongoDB to add, modify, and delete data Sep 20, 2023 pm 02:53 PM

How to use MongoDB to add, modify, and delete data. MongoDB is a popular open source NoSQL database with high performance, scalability, and flexibility. When using MongoDB to store data, we often need to add, modify, and delete data. The following are specific code examples to implement these functions using MongoDB: Database connection: First, we need to connect to the MongoDB database. In Python, this can be achieved using the pymongo library

How to add a new column in dedecms? How to add a new column in dedecms? Mar 14, 2024 pm 01:51 PM

How to add a new column in dedecms? With the rapid development of the Internet, website content management systems have become more and more important. As a powerful and flexible content management system, dedecms is favored by many website developers. In the process of using dedecms to build a website, sometimes we need to add some new columns according to actual needs in order to better organize and manage website content. So, how to add a new column in dedecms? Next, we will introduce you to the specific steps and code examples.

How to increase the number of undo steps in PPT documents How to increase the number of undo steps in PPT documents Mar 26, 2024 pm 02:30 PM

1. Run the PPT software. 2. Click the [File] tab in the upper left corner. 3. Click [Options] on the left side of the File tab. 4. Click [Advanced] on the left side of the PowerPoint options window. 5. In the Advanced tab, enter the number of undo steps you need. 6. Click [OK] after the settings are completed. Now the PowerPoint software will record the number of steps you set for you. Note that different versions of Office have slightly different ways of entering option settings.

McKinsey: Artificial Intelligence application rate will double in 2022 McKinsey: Artificial Intelligence application rate will double in 2022 Oct 10, 2023 pm 02:21 PM

Shopping carts that automatically follow customers and robots that can pick cucumbers faster than humans are more likely to make headlines, but the most high-profile applications of artificial intelligence and machine learning technology are often unseen behind the scenes. More and more organizations are beginning to apply AI and machine learning-driven tools to back-office processes such as document processing, data entry, employee onboarding, and workflow automation, and they are seeing significant efficiency gains. The ability to improve back-office productivity through automation has been evident for decades, but the emergence of advanced artificial intelligence and machine learning tools has brought a step change in what automation can achieve, including in highly regulated industries like healthcare. (Source: AI Generated) “In the past, artificial intelligence was considered a complex

See all articles