當文字太多，而我們不需要展示那麼的時候就會出現省略號是常見的需求，那麼出現省略號怎麼實現呢？
第一種，單行文本出現省略號;就是使用text-overflow：ellipsis屬性和屬性值，
還要一定要配合white-space：nowrap;表示不換行，overflow：hidden;溢出隱藏，當然也得你哈的文字超過你的寬度纔行
div {
height: 30px;
width: 100px;
border: 1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
第二種，多行文本溢出出現省略號，這個問題的話估計困擾了很多人，那麼我們來看看怎麼實現
div {
position:relative;
line-height:1.4em;
height:4.2em;
overflow:hidden;
}
div::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
}
這=個實現原理是在標籤後面添加一個僞元素，僞元素的內容就是省略號，
如果IE8以下不支持就把::after 改爲:after就OK啦
還有一種情況，不想用僞元素出現省略號怎麼實現多行文本出現省略號呢？
width:value;
overflow : hidden;
text-overflow: ellipsis;
/* display：box主要是控制父容器裏面子元素的排列方式 */
display: -webkit-box;
/* 實現限制文字顯示多行，多餘的用... */
-webkit-line-clamp: 2; //當文字達到兩行以後就會出現省略號
/* 屬性規定框的子元素應該被水平或垂直排列。 */
-webkit-box-orient: vertical;