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
question After Nginx reverse proxy, the Tomcat ap...
Preface Many friends who have just come into cont...
Includes the process of initializing the root use...
mysql accidentally deleted data Using the delete ...
This article records the detailed tutorial of MyS...
This article uses an example to describe how to u...
Application Scenario In the data table, the appli...
Preface Many years ago, I was a newbie on the ser...
The detailed process of configuring the MySQL dat...
MySQL supports many data types, and choosing the ...
Here is a text hovering and jumping effect implem...
Table of contents 1. Install Node Exporter 2. Ins...
Table of contents 1. Introduction 2. Main text 2....
Write configuration files in server.xml and conte...
If you want to wrap the text in the textarea input...