Multi-line text overflow little point in the implementation of 3

Renderings:

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > the Document </ title > 
    < style > 
    body { 
        font : 14px / 22px "the Microsoft YaHei" ; 
    } 
    the p- { 
        width : 300px ; 
        margin : 50px Auto ; 
    } 


    / * multi-line text beyond ... :( program applies to a few lines of text uncertain, if the number of lines exceeds the proceeds ...Show) * /
    .test1 { 
        -webkit-Line-CLAMP : . 3 ;     / * for limiting the number of lines in a block of text elements displayed * / 
        / * the display: -webkit-Box; / * must be combined with the properties of the object as a resilient and elastic display box model * /   
        the display : -webkit-box ;     / * must be combined with the properties of the object as an elastic stretch box model display * / 

        -webkit-box-Orient : Vertical ;     / * must be combined with the properties set or retrieve a telescopic cartridge child element arrangement of objects * / 
        overflow : hidden ; 
　　　　　　Word-BREAK : BREAK-All ; 
    } 



    / * multi-line text exceeds ... :( second scheme applicable to known display text certainly not open) * / 
    .test2{ 
        Position : relative ; 
        line-height : 20px ; 
        max-height : 40px ;    / * max-height / height set to an integer multiple of the line-height of the text display to prevent the half * / 
        overflow : hidden ; 
    } 

    .test2 After :: { 
        Content : "..." ; 
        position : Absolute ; 
        right : 0 ; 
        bottom : 0 ; 
        padding-left : 20px ;
        background : Linear-gradient (55% to right, transparent, # FFF) ; 
    } 
    / * multi-line text exceeds three programs ... * / 
    .test3 { 
        / * implemented using JavaScript * / 
    } 
    </ style > 
    < Script > 
    window .onload = function () {
         var oTxt = document.getElementById ( " TXT " );
         function Sub (NUM) { 
            oTxt.innerHTML = oTxt.innerHTML.substring ( 0 , NUM); 
        } 
        Sub (60 ); 
    }; 
    </ Script > 
</ head > 
< body > 
    < the p- class = "test1" > Baidu Baidu Encyclopedia is the company launched an open-content, free encyclopedia network platform, its beta 4, 2006 January 20 on the line, the official version in 2008. April 21 release, as of November 2014 included the number of entries has reached 10 million. 
Baidu Encyclopedia aims to create a knowledge covering various fields of Chinese information-gathering platform. Baidu Encyclopedia emphasis on user involvement and dedication, to fully mobilize the power of the Internet users, the wisdom mind of millions of users on convergence, and actively carry out exchanges and sharing. Meanwhile, Baidu Encyclopedia realization, combined with Baidu Baidu know the search to meet the information needs of users from different levels. </ The p- > 
    < the p- class = "test2" >  Baidu Baidu Encyclopedia is the company launched an open-content, free encyclopedia network platform, its beta version in April 20, 2006 on the line, the official version in April 2008 21 release, as of November 2014 included the number of entries has reached 10 million.
Baidu Encyclopedia aims to create a knowledge covering various fields of Chinese information-gathering platform. Baidu Encyclopedia emphasis on user involvement and dedication, to fully mobilize the power of the Internet users, the wisdom mind of millions of users on convergence, and actively carry out exchanges and sharing. Meanwhile, Baidu Encyclopedia realization, combined with Baidu Baidu know the search to meet the information needs of users from different levels. </ P > 
    <= "Test3" > < span the above mentioned id = "TXT" > Baidu Baidu Encyclopedia is the company launched an open-content, free encyclopedia network platform, its beta version in April 20, 2006 on the line, the official version in April 2008 May 21 release, as of November 2014 included the number of entries has reached 10 million. 
Baidu Encyclopedia aims to create a knowledge covering various fields of Chinese information-gathering platform. Baidu Encyclopedia emphasis on user involvement and dedication, to fully mobilize the power of the Internet users, the wisdom mind of millions of users on convergence, and actively carry out exchanges and sharing. Meanwhile, Baidu Encyclopedia realization, combined with Baidu Baidu know the search to meet the information needs of users from different levels. </ Span > < span > ... </ span > </ P > 
</ body >     
</ HTML >

 

Reprinted: https://www.cnblogs.com/jiujiaoyangkang/p/4950377.html