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

Detailed explanation of the principle and implementation process of Nginx configuration https

Use the Linux utility certbot to generate https c...

Sample code for making desktop applications with vue + Electron

1.vue packaging Here we use the vue native packag...

js code to realize multi-person chat room

This article example shares the specific code of ...

Top 10 Time-Saving Tips to Shorten Web App Development (Graphical Tutorial)

In today's development environment, fast is b...

Example code for implementing stacked carousel effect with HTML+CSS+JS

Effect: When the slideshow moves in one direction...

This article will help you thoroughly understand the specific use of cgroup in Docker

Table of contents What is cgroup Composition of c...

Sample code for modifying the input prompt text style in html

On many websites, we have seen the input box disp...

Summary of some HTML code writing style suggestions

Omit the protocol of the resource file It is reco...

Detailed explanation of MySQL master-slave replication read-write separation construction

MySQL master-slave setup MySQL master-slave repli...

HTML Tutorial: DOCTYPE Abbreviation

When writing HTML code, the first line should be ...

MySQL table addition, deletion, modification and query basic tutorial

1. Create insert into [table name] (field1, field...

6 ways to implement the maximum and minimum values ​​of an array in javascript

Given an array [1,8,5,4,3,9,2], write an algorith...

Vue-router example code for dynamically generating navigation menus based on backend permissions

Table of contents Vue.js 1. Register global guard...

Page Refactoring Skills - Javascript, CSS

About JS, CSS CSS: Stylesheet at the top Avoid CS...

docker compose idea CreateProcess error=2 The system cannot find the specified file

Docker Compose Introduction to Compose Compose is...