Home Web Front-end JS Tutorial Ellipses are automatically generated when the text exceeds the specified number of lines.

Ellipses are automatically generated when the text exceeds the specified number of lines.

Apr 28, 2018 am 10:29 AM
Automatic generated Number of lines Regulation

This time I will bring you the automatic generation of ellipses when the text exceeds the specified number of lines, and the automatic generation of ellipses when the text exceeds the specified number of lines. What are the precautions?. Here is a practical case, let's take a look.

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

Operation effect:

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:

How to verify the correct email address in JS

How to pass array parameters in js

The above is the detailed content of Ellipses are automatically generated 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)

Hot Topics

Java Tutorial
1653
14
PHP Tutorial
1251
29
C# Tutorial
1224
24
How to automatically generate directory page numbers for wps directory How to automatically generate directory page numbers for wps directory Feb 27, 2024 pm 04:01 PM

WPS is a powerful office software that can help us complete various office tasks efficiently. Among them, automatically generating table of contents page numbers is a very practical function. It can greatly improve the work efficiency of users, so the editor of this website will bring you this article to introduce in detail how to use WPS to automatically generate directory page numbers. I hope it can help everyone in need. How to automatically generate table of contents page numbers for a wps directory. First, open the wps group document, enter the content of the table of contents to be generated in the blank space, and then select the styles of title 1, title 2, and title 3 in the start menu bar. 2. Then after setting it up, we click the [Reference] function. After clicking, in the reference toolbar, here we click [Directory]; 3. Finally click

How to automatically generate a directory. How to set the format of the automatically generated directory. How to automatically generate a directory. How to set the format of the automatically generated directory. Feb 22, 2024 pm 03:30 PM

Select the style of the catalog in Word, and it will be automatically generated after the operation is completed. Analysis 1. Go to Word on your computer and click to import. 2After entering, click on the file directory. 3 Then select the style of the directory. 4. After the operation is completed, you can see that the file directory is automatically generated. Supplement: The table of contents of the summary/notes article is automatically generated, including first-level headings, second-level headings and third-level headings, usually no more than third-level headings.

How to automatically generate equals() and hashCode() methods using Records class in Java 14 How to automatically generate equals() and hashCode() methods using Records class in Java 14 Jul 31, 2023 pm 01:52 PM

How to automatically generate equals() and hashCode() methods using Records class in Java14 In Java programming, we often need to write equals() and hashCode() methods for our classes. These two methods are very important when dealing with equality and hash codes of objects. To simplify this process, Java14 introduces a new Records class. The Records class provides a way to simplify writing equals() and hashCode

How to develop a WordPress plugin that automatically generates e-books How to develop a WordPress plugin that automatically generates e-books Sep 05, 2023 am 08:01 AM

How to develop a WordPress plug-in that automatically generates e-books. With the popularity of social media and e-readers, e-books have become one of the important ways for people to obtain and share knowledge. As a WordPress developer, you may be faced with the need to create and publish e-books. To simplify this process, we can develop a WordPress plugin that automatically generates e-books. This article will teach you how to develop such a plug-in and provide code examples for reference. Step 1: Create the basic file structure of the plugin first

How to use PHP for automatic generation of API documentation How to use PHP for automatic generation of API documentation Jun 06, 2023 am 08:01 AM

With the continuous development of Internet technology, API has become an important way to realize data interaction between applications. In the process of writing APIs, document writing and maintenance inevitably become an important issue. However, the traditional way of manually writing and maintaining API documentation is inefficient and error-prone, and is not suitable for projects with continuous iteration. Using PHP to automatically generate API documents can effectively improve efficiency and reduce errors. This article will introduce how to use PHP to automatically generate API documents. Manual

How to automatically generate document number in excel How to automatically generate document number in excel Mar 20, 2024 am 09:51 AM

The form that only adds data is the most basic form. Some document forms with fixed content will be more complicated. In the documents produced by Excel, some contents must automatically generate some data for the convenience of recording for continuity and authenticity. We often see The invoices and machine-printed invoice numbers are automatically consecutive to prevent tax evasion. How are these document numbers automatically generated? Let’s listen to the explanation below. For example, when generating the number of an outbound order, a combination of English letters and numbers is usually used. The English letter part of the number may use the capital form of the first letter of the document type. For example, the outbound document can be prefixed with CK. Method 1: Use the simplest rand function, which can generate a random number between 0-1. So our encoding

How to develop a WordPress plugin that automatically generates task lists How to develop a WordPress plugin that automatically generates task lists Sep 06, 2023 pm 12:43 PM

How to Develop a WordPress Plugin that Automatically Generates Task Lists WordPress is a very popular content management system with a wide range of features and a flexible plugin system that can meet a variety of different needs. Sometimes, we may need a task list to manage our workflow. At this time, a WordPress plug-in that automatically generates task lists is very useful. This article describes how to develop such a plug-in and provides code examples. First, we need to create a new plugin, which can be

How to automatically generate duplicate code using code generation tools in Java? How to automatically generate duplicate code using code generation tools in Java? Aug 02, 2023 pm 12:00 PM

How to automatically generate duplicate code using code generation tools in Java? Introduction: During the development process, we often encounter situations where we need to write a large amount of repeated code. These duplicate codes not only affect development efficiency, but also easily cause errors. In order to solve this problem, we can use code generation tools in Java to automatically generate duplicate codes and improve development efficiency and code quality. 1. Selection of code generation tools There are many code generation tools to choose from in Java, such as MyBatisGenerator,

See all articles