CSS, J ' s single line, multiline text overflow display ellipsis

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