In the project, because the actual description of the text too much, resulting in the initial page length is too long, the rest of the information utilization decreased; it is necessary to initialize the limit rows when there is too much text.
1. CSS single-line text overflow, display ellipsis
<style= "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" > I want overflow, I want overflow, I want overflow, I want overflow, I want overflow, I want overflow, I want overflow, I want overflow, I want overflow, I want overflow, I want overflow, I want overflow . </div>
2. CSS multi-line text overflow, display ellipsis
<style= "overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;- Webkit-line-clamp:3; " > I'm going to spill, multiple lines of text, I want to overflow, multiple lines of text, I want overflow, multiple lines of text, I want overflow, multiline text, I want overflow, multiline text, I want overflow, multiline text, I want overflow, multiline text, I want overflow, multiline text, I want overflow, multiple lines of text, I'm going to overflow, multiple lines of text, I'm going to overflow, multiple lines of text. </div>
The above two are suitable for the case of only text in the label, and sometimes we will encounter such a situation
<Div> <P> <span>I am the content</span> </P> <P> <span>I am the content</span> </P> <P> <span>I am the content</span> </P> <P> <span>I am the content</span> </P></Div>
3. The third is to solve the problems encountered in the above situation
I read a lot of examples on the Internet, each have a good, I use to fixed line-height, line is also each line in a fixed height, such as: line-height:20px;, each blank line also to let the empty line is 20px, So we can use multiples of 20 to display the number of rows and content to display in a reasonable way.
<Divclass= "text"> <P>you don't want to change the world, but you want to see the sunrise? Want to experience the legendary morning run? Want to meet the goddess of God in a morning run? Would you like to see the library or the training ground at 5 in the morning? Want to breathe air that has not been over-rendered by car exhaust? Want to make a breakfast for your lover? You have to get up early! You didn't finish it last night? How many pages is the word? Catch a plane and catch a train? You have to get up early! You don't want to go to work and get up early, don't you?</P> <P>Everyone is welcome to the early bird with the worm-21 days early plan. Set off, in the process of bathing the morning light, we wish everyone to start a good day! </P> <spanclass= "Points">...</span></Div>
. Text{Color:#707070;padding:0 12px;position:relative;Line-height:20px;Overflow:Hidden;Margin-bottom:12px;Max-height:60px;}. Points{content:"...";position:Absolute;Bottom:0; Right:16px;Padding-left:40px;font-size:18px;letter-spacing:3px;background:-webkit-linear-gradient (left, Transparent, #fff 55%);background:-o-linear-gradient (right, transparent, #fff 55%);background:-moz-linear-gradient (right, transparent, #fff 55%);background:Linear-gradient (to right, transparent, #fff 55%);}. Text P{margin:0;}. Text P+p{Margin-top:20px;}
//Font Display varShowboo =true; $('. De-box. Text '). On (' click ',function(){ if(Showboo) {Console.log (1); $('. De-box. Text '). CSS (' maxheight ', ' none ')); $('. De-box. Points '). Hide (); Showboo=false; }Else{ $('. De-box. Text '). CSS (' maxheight ', ' 60px ')); $('. De-box. Points '). Show (); Showboo=true; }; });
In this case, there will be a line of blank line display phenomenon, this problem is left, today a little tired
CSS, J ' s single line, multiline text overflow display ellipsis