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

Tomcat obtains the client domain name of Nginx reverse proxy

question After Nginx reverse proxy, the Tomcat ap...

Solve the mobile terminal jump problem (CSS transition, target pseudo-class)

Preface Many friends who have just come into cont...

Windows platform configuration 5.7 version + MySQL database service

Includes the process of initializing the root use...

Mysql accidental deletion of data solution and kill statement principle

mysql accidentally deleted data Using the delete ...

MySQL Installer Community 5.7.16 installation detailed tutorial

This article records the detailed tutorial of MyS...

mysql group_concat method example to write group fields into one row

This article uses an example to describe how to u...

MySQL table field time setting default value

Application Scenario In the data table, the appli...

How to use VUE to call Ali Iconfont library online

Preface Many years ago, I was a newbie on the ser...

MySQL database master-slave configuration tutorial under Windows

The detailed process of configuring the MySQL dat...

MySQL data type optimization principles

MySQL supports many data types, and choosing the ...

CSS 3.0 text hover jump special effects code

Here is a text hovering and jumping effect implem...

Detailed tutorial on installing Prometheus with Docker

Table of contents 1. Install Node Exporter 2. Ins...

Details on using order by in MySQL

Table of contents 1. Introduction 2. Main text 2....

Solution to the problem of automatic restoration after modifying server.xml and content.xml in Tomcat

Write configuration files in server.xml and conte...

How to implement line breaks in textarea text input area

If you want to wrap the text in the textarea input...