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

Things You Don’t Know About the CSS ::before and ::after Pseudo-Elements

CSS has two pseudo-classes that are not commonly ...

Example of how to quickly delete a 2T table in mysql in Innodb

Preface This article mainly introduces the releva...

The grid is your layout plan for the page

<br /> English original: http://desktoppub.a...

HTML dl, dt, dd tags to create a table vs. Table creation table

Not only does it reduce the cost of website develo...

A brief discussion on browser compatibility issues in JavaScript

Browser compatibility is the most important part ...

MySQL updates a field in a table to be equal to the value of a field in another table

As shown below: update table1 as z left join tabl...

MySQL index principle and query optimization detailed explanation

Table of contents 1. Introduction 1. What is an i...

Nodejs plug-in and usage summary

The operating environment of this tutorial: Windo...

Detailed explanation of virtual DOM and diff algorithm in react

The role of virtual DOM First of all, we need to ...

MySQL cross-table query and cross-table update

Friends who have some basic knowledge of SQL must...

Detailed explanation of MySQL multi-table join query

Table of contents Multi-table join query Inner Jo...

Centos7 install mysql5.6.29 shell script

This article shares the shell script of mysql5.6....

Summary of JavaScript custom object methods

Table of contents 1. Use object to create an obje...

Detailed steps for installing MySQL using cluster rpm

Install MySQL database a) Download the MySQL sour...

MySQL 5.7.10 installation and configuration tutorial under Windows

MySQL provides two different versions for differe...