如何獲得在第二行省略號是跨瀏覽器兼容[陣營]

Question

Click for image

我需要這樣。剪輯僅適用於Chrome。我需要這個反應項目。只使用CSS會很有幫助。

Answer 1

您可以用這種方法使用一種解決方案。

就是這樣。

/* 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; 
} 

Ref。鏈接 - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Answer 2

您可以使用Trunk8插件（jQuery）來實現此效果。它具有瀏覽器兼容性並且也具有響應能力。