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.

Implementation of one-click packaging and publishing of Vue projects using Jenkins

Blog

HTML exceeds the text line interception implementation principle and code

Implementing custom scroll bar with native js

Summary of HTML formatting standards for web-based email content

js data types and their judgment method examples

How to modify the initial password of a user in mysql5.7

How to install phabricator using Docker

Linux ssh server configuration code example

Implementation of one-click packaging and publishing of Vue projects using Jenkins

Detailed explanation of MySQL execution plan

Solution to the problem that Docker container cannot access Jupyter

Several implementation methods of the tab bar (recommended)

Recommend

JavaScript to achieve text expansion and collapse effect

What is the relationship between Mapper sql statement fields and entity class attribute names

vue+el-upload realizes dynamic upload of multiple files

Three ways to communicate between React components (simple and easy to use)

Vue implements pull-down to load more

How to deploy Vue project using Docker image + nginx

CSS box hide/show and then the top layer implementation code

Optimized implementation of count() for large MySQL tables

Tips for data statistics in MySQL

Solution to using html2canvas to process Dom elements with Baidu map into images

25 fresh useful icon sets for download abroad

Common problems and solutions during MySQL MGR construction

Docker Getting Started Installation Tutorial (Beginner Edition)

It is not recommended to copy the content in Word directly to the editor on the website.

Detailed explanation of the master-slave configuration tutorial of redis under Docker