호환 crossbrowser이다 번째 줄에있는 줄임표를 얻으려면 어떻게 이런 식으로 얻을 필요가

-1

Click for image 호환 crossbrowser이다 번째 줄에있는 줄임표를 얻으려면 어떻게 이런 식으로 얻을 필요가

[반작용]. 클립은 크롬에서만 작동합니다. 나는 반응 프로젝트에 이것을 필요로한다. CSS를 사용하면 도움이 될 것입니다.

2017-09-26 PSN

이렇게하면 하나의 솔루션을 사용할 수 있습니다.

이와 비슷한 것.

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

출처

2017-09-26 06:30:38 sajee