html After two lines of text, use ellipses instead of remaining

A summary

Sentence summary:

The principle is very simple, the box's height is set to twice the height of the row, after hiding beyond, so that only two lines, and then use absolute positioning properties after add a few points behind the second row ...

  .style2 { 
      position : relative ; 
      line-height : 21px ; 
      height : 42px ; / * height is an integral multiple of the line-height, text display to prevent incomplete * / 
      overflow : hidden ; 
  } 
  .style2 After :: { 
      background : Linear gradient- (to right, RGBA (255, 255, 255, 0), #FFFFFF 50%) 0 0 REPEAT Scroll RGBA (0, 0, 0, 0) ; 
      bottom : 0 ; 
      Content : "..." ; 
      padding : 0 5px 1px 30px;
      position: absolute;
      right: 0;
  }

1, the cut-off line effect?

Note that setting the width and height, the rest is used to remember white-space (not wrapping), overflow (exceeding partially hidden), text-overflow (hidden symbols used alternatively)

  .font_cut{
      width: 100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
  }

2, how after property inside the specified content?

content: "...";

  .style2::after {
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
      bottom: 0;
      content: "...";
      padding: 0 5px 1px 30px;
      position: absolute;
      right: 0;
  }

3, after which you can attribute absolute positioning it?

Yes, operation after operation and property on the same general style

  .style2::after {
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
      bottom: 0;
      content: "...";
      padding: 0 5px 1px 30px;
      position: absolute;
      right: 0;
  }

Second, the html two lines of text, it is replaced by an ellipsis

1, the effect of FIG.

2, the code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .font_cut{
 8             width: 100%;
 9             white-space:nowrap;
10             overflow:hidden;
. 11              text-overflow : ellipsis ; 
12 is          } 
13 is          .style2 { 
14              position : relative ; 
15              line-height : 21px ; 
16              height : 42px ;  / * height is an integral multiple of the line-height, text display to prevent incomplete * / 
. 17              overflow : hidden ; 
18 is          } 
. 19          .style2 After :: { 
20 is              background : linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
21             bottom: 0;
22             content: "...";
23             padding: 0 5px 1px 30px;
24             position: absolute;
25             right: 0;
26         }
27 
28     </style>
29 
30 
31 </head>
32 <body>
33 is      < div class = "font_cut" style = "width: 300px by;" > 
34 is          < span > line shows the high, to use ellipses; to line shows the high, to use ellipses; to line shows the high, to use ellipses; to line shows high, it ellipsis; to line shows the high, to use ellipses; to line shows the high, to use ellipses; to </ span > 
35      </ div > 
36      < div style = "margin-bottom: 60px;" > </ div > 
37 [      < div class = "style2" style = "width: 300px by;" > 
38 is          < span style = "" class="">HTML text is longer than two lines after it was replaced with ellipses display; HTML text more than two lines after it ellipsis display in place; HTML text more than two lines after it ellipsis display in place; HTML text more than two lines after it ellipsis display in place; HTML text more than two lines after it was replaced with ellipses display; more than two lines after the HTML text to display in place of ellipsis; </ span > 
39      </ div > 
40  </ body > 
41 is  </ HTML >

Three, html text exceeds two lines, the display ellipsis

Transfer or Reference: html text exceeds two lines, the ellipsis
https://blog.csdn.net/camillezj/article/details/52767267

Multi-line display beyond the ellipsis

overflow: hidden;
text-overflow: ellipsis;
the display: -webkit-Box;
-webkit-Line-CLAMP: 2; // 2 rows
-webkit-box-orient: vertical;
Note: -webkit-line-clamp is not a specification of attributes (unsupported WebKit property), it does not appear in the draft CSS specifications. It applies only to WebKit browser kernel, so the firebox, ie, etc. does not support this property.

Other browsers practice:

The simplest thing is more reliable relative positioning of the height of the container is provided with an analog element comprising an ellipsis (...) is implemented:
text containers styling:

position: relative;
line-height: 1.4em;
height: 4.2em; // height is an integral multiple of the line-height, text display to prevent incomplete
overflow: hidden;

文字容器::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
padding: 0 5px 1px 30px;
position: absolute;
right: 0;
}

Or use the plug: js plugin -Clamp.js, jquery plugins -jQuery.dotdotdot

单行不换行：width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;