Add ellipses when the text exceeds the specified number of lines
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>
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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.

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

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.

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 "Page Layout" 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. 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? 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.

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.

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
