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

JavaScript to achieve text expansion and collapse effect

The implementation of expanding and collapsing li...

vue+el-upload realizes dynamic upload of multiple files

vue+el-upload multiple files dynamic upload, for ...

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

Table of contents 1. Parent-child component commu...

Vue implements pull-down to load more

Developers familiar with Element-UI may have had ...

How to deploy Vue project using Docker image + nginx

1. Packaging Vue project Enter the following name...

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

.imgbox{ width: 1200px; height: 612px; margin-rig...

Optimized implementation of count() for large MySQL tables

The following is my judgment based on the data st...

Tips for data statistics in MySQL

As a commonly used database, MySQL requires a lot...

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

Problem 1: Baidu Map uses tiled images (the map i...

25 fresh useful icon sets for download abroad

1. E-Commerce Icons 2. Icon Sweets 2 3. Mobile Ph...

Common problems and solutions during MySQL MGR construction

Table of contents 01 Common Faults 1 02 Common Fa...

Docker Getting Started Installation Tutorial (Beginner Edition)

Doccer Introduction: Docker is a container-relate...