HTML exceeds the text line interception implementation principle and code

HTML exceeds the text line interception implementation principle and code
The HTML code for intercepting text beyond multiple lines is as follows:

HTML:

Copy code
The code is as follows:

<div class="sytm-text-1">
<p>
123WORDPRESS.COM Website: https://www.jb51.net
</p>
</div>
<div class="sytm-text-2">
<p>
123WORDPRESS.COM Website: https://www.jb51.net
</p>
</div>

CSS:

Copy code
The code is as follows:

.sytm-text-1 {
color: #FFF;
background: #000;
width: 410px;
height: 22px;
}
.sytm-text-2 {
color: #FFF;
background: #000;
width: 410px;
height: 44px;
}
p {
line-height: 22px;
}

JS (import jQuery):

Copy code
The code is as follows:

$("div[class*='sytm-text']").each(function(e){
var divHeight = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divHeight) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});

From the above code, we can find that the main principle of achieving this effect is to compare the height of the child container (p) with that of the parent container (div) and perform character interception according to the regular expression until the two are equal. Therefore, the key to controlling the number of intercepted lines naturally lies in the div height.

<<:  PNG Alpha Transparency in IE6 (Complete Collection)

>>:  Detailed explanation of CSS float property

Recommend

A brief discussion on the binary family of JS

Table of contents Overview Blob Blob in Action Bl...

An article to teach you HTML

If you are not committed to becoming an artist, t...

Summary of 10 must-see JavaScript interview questions (recommended)

1.This points to 1. Who calls whom? example: func...

How to use file writing to debug a Linux application

In Linux, everything is a file, so the Android sy...

Database query optimization: subquery optimization

1. Case Take all employees who are not the head o...

Basic usage examples of listeners in Vue

Table of contents Preface 1. Basic usage of liste...

Detailed tutorial on installing MySQL offline on CentOS7

1. Delete the original mariadb, otherwise mysql c...

About ROS2 installation and docker environment usage

Table of contents Why use Docker? Docker installa...

MySQL learning record: bloody incident caused by KEY partition

Demand background Part of the data in the busines...

Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

1. First, the pure HTML file must have an entry i...

HTML Basics Must-Read---Detailed Explanation of Forms, Image Hotspots, Web Page Division and Splicing

1. Form <form id="" name=""...

What is flex and a detailed tutorial on flex layout syntax

Flex Layout Flex is the abbreviation of Flexible ...

CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code

As a front-end monkey, whether it is during an in...

How to add Lua module to Nginx

Install lua wget http://luajit.org/download/LuaJI...

Detailed explanation of MySQL index selection and optimization

Table of contents Index Model B+Tree Index select...