css之多行文本輸出

<div class="desc" title="Jennifer Joanna Aniston (born February 11, 1969)[1] is an American actress, producer, and businesswoman.[2] The daughter of Greek actor John Aniston and American actress Nancy Dow, Aniston gained worldwide recognition for portraying Rachel Green on the popular television sitcom Friends (1994–2004), a role which earned her 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 was later recognized as one of the 100 greatest female characters in United States television">
 Jennifer Joanna Aniston (born February 11, 1969)[1] is an American actress, producer, and businesswoman.[2] The daughter of Greek actor John Aniston and American actress Nancy Dow, Aniston gained worldwide recognition for portraying Rachel Green on the popular television sitcom Friends (1994–2004), a role which earned her 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 was later recognized as one of the 100 greatest female characters in United States television
 <button>更多</button>
</div>

.desc {
 position: relative;
 width: 400px;
 /*用像素表示，不要用em，以免造成不同瀏覽器下計算出現(xiàn)小數(shù)點取舍不同導(dǎo)致1像素的差距【行高*截取行數(shù)】*/
 overflow: hidden;
 max-height: 72px;
 font-size: 16px;
 line-height: 24px;
 overflow: hidden;
 word-wrap: break-word;
 /*強制打散字符*/
 word-break: break-all;
 background: #fff;
 /*同背景色*/
 color: #fff;

 &:after,
 &:before {
 content: attr(title);
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 /*實際文本顏色*/
 color: #000;
 }
 &:before {
 display: block;
 overflow: hidden;
 /*顯示在最上面，展示前面的(截取行數(shù)-1)行字符*/
 z-index: 1;
 /*根據(jù)行高和截取行數(shù)調(diào)整，值為[(截取行數(shù)-1)*行高]*/
 max-height: 48px;
 /*同背景色*/
 background: #fff;
 }
 &:after {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 /*截取行數(shù)*/
 -webkit-line-clamp: 3;
 /*行首縮進字符數(shù)，值為[(截取行數(shù)-1)*尾部留空字符數(shù)]*/
 text-indent: -8em;
 /*尾部留空字符數(shù)*/
 padding-right: 4em;
 }
 button {
 width: 40px;
 height: 20px;
 font-size: 12px;
 padding: 0;
 outline: 0;
 position: absolute;
 right: 0;
 bottom: 0;
 }
}