Comment obtenir des points de suspension dans la deuxième ligne qui est compatible crossbrowser [réagissez]

Question

Click for image

Je dois obtenir comme ça. Le clip fonctionne seulement en chrome. J'en ai besoin pour un projet de réaction. Utiliser seulement css serait utile.

Answer 1

Vous pouvez utiliser une solution de cette manière.

Quelque chose comme ça.

/* styles for '...' */ 
.block-with-text { 
    /* hide text if it more than N lines */ 
    overflow: hidden; 
    /* for set '...' in absolute position */ 
    position: relative; 
    /* use this value to count block height */ 
    line-height: 1.2em; 
    /* max-height = line-height (1.2) * lines max number (3) */ 
    max-height: 3.6em; 
    /* fix problem when last visible word doesn't adjoin right side */ 
    text-align: justify; 
    /* place for '...' */ 
    margin-right: -1em; 
    padding-right: 1em; 
} 
/* create the ... */ 
.block-with-text:before { 
    /* points in the end */ 
    content: '...'; 
    /* absolute position */ 
    position: absolute; 
    /* set position to right bottom corner of block */ 
    right: 0; 
    bottom: 0; 
} 
/* hide ... if we have text, which is less than or equal to max lines */ 
.block-with-text:after { 
    /* points in the end */ 
    content: ''; 
    /* absolute position */ 
    position: absolute; 
    /* set position to right bottom corner of text */ 
    right: 0; 
    /* set width and height */ 
    width: 1em; 
    height: 1em; 
    margin-top: 0.2em; 
    /* bg color = bg color under block */ 
    background: white; 
} 

Réf. lien - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Answer 2

Vous pouvez utiliser le plugin Trunk8 (jQuery) pour obtenir cet effet. Où il a une compatibilité de navigateur et aussi réactif aussi.