Multi-line text output of CSS

See the introduction callout to display only 3 lines of text, more than 3 lines display 3 lines, this is prepared to take a string intercept muddle (unforgivable things are not on their own requirements, there is no lower limit), after viewing the online solution, hereby share.

Ideas

Now suppose that the number of lines of text you want to display is n rows, first set the text container's Max-height = n multiplied by line-height, and the nth line displays the text as part of the text + ... + expand all. Sets the text container's font color to the background color, and the pseudo-element before and after content are text contents. With the pseudo-element before display (N-1) line element, Z-index = 1 (ensure before pseudo-element Z-index maximum in the text container, before pseudo element, after pseudo element, expand All button). The padding-right width of the after pseudo element is the width of the Expand All button (in em), text-indent = (N-1) The width of the [Expand All] button (how to understand indentation?). By setting the padding-right of the after pseudo-element to the [expand All] button of the nth row, the position is left because the 1th row, line 2nd ... The (N-1) line displays fewer fonts that have the width of the expand All button, so to make sure that the pseudo element is displayed correctly in the nth row, you need to indent (N-1) by the width of the expand All button)

Full code

<div class= "desc" title= "Jennifer Joanna Aniston (born February One, 1969) [1] is an American actress, producer, and Busi Nesswoman. [2] The daughter of Greek actor John Aniston and American actress Nancy Dow, Aniston gained worldwide recognition for port Raying Rachel Green on the popular television sitcom Friends (1994–2004), a role which earned she a Primetime Emmy award, A Golden Globe award, and a screen Actors Guild award. The character was widely popular during the airing of the series and is later recognized as one of the greatest femal E characters in states television "> Jennifer Joanna Aniston (born February One, 1969) [1] is an American AC Tress, producer, and businesswoman. [2] The daughter of Greek actor John Aniston and American actress Nancy Dow, Aniston gained worldwide recognition for port Raying Rachel Green on the popular television sitcom Friends (1994–2004), a role which earned she a Primetime Emmy award, A Golden Globe award, and a screen Actors GuilD Award. The character was widely popular during the airing of the series and is later recognized as one of the greatest femal E characters in states television <button> more </button></div>

. desc {position:relative;  width:400px;  /* in pixels, do not use EM, in order to avoid the difference between different browsers to calculate the difference between the decimal point 1 pixels of the gap "row high * intercept Rows" */Overflow:hidden;  max-height:72px;  font-size:16px;  line-height:24px;  Overflow:hidden;  Word-wrap:break-word;  /* Force Break characters */word-break:break-all;  Background: #fff;  /* Same background color */color: #fff;    &:after, &:before {content:attr (title);    Position:absolute;    left:0;    top:0;    width:100%;  /* Actual text color */color: #000;    } &:before {display:block;    Overflow:hidden;    /* displayed at the top, showing the preceding (intercept lines-1) line character */z-index:1;    /* Based on row height and row count, the value is [(Intercept rows-1) * Row height]*/max-height:48px;  /* Same background color */background: #fff;    } &:after {display:-webkit-box;    -webkit-box-orient:vertical;    -webkit-box-sizing:border-box;    Box-sizing:border-box;    /* Number of lines intercepted */-webkit-line-clamp:3;    /* Indent the number of characters at the beginning of the line (number of lines-1) * Trailing blank characters]*/text-indent: -8em;  /* Trailing blank characters */padding-right:4em;    } button {width:40px;    height:20px;    font-size:12px;    padding:0; Outline:0;    Position:absolute;    right:0;  bottom:0; }}

