css 單行顯示省略號，以及多行顯示省略號的

<div>顯示的內容</div>

1. 單行顯示省略號

div{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

2.多行溢出顯示省略號

div{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    // text-overflow: ellipsis;
    -webkit-line-clamp: 4;
}

當-webkit-box-orient不起做用時(默認編譯的時候，會過濾 )
（關閉 autoprefixer 而後再開啓：用註釋就能夠作到）
代碼：

div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */

}

又或者

div{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
};

各個屬性的使用：

1. overflow:hidden;設置了這個屬性，text-overflow屬性纔會生效。

2. text-overflow: ellipsis; 用來在多行文本的狀況下，用省略號"..."隱藏超出範圍的文本內容。

3. display: -webkit-box;必須結合的屬性，將對象做爲彈性伸縮盒子模型顯示。

4. -webkit-line-clamp: 2;用來限制在一個塊元素顯示的文本的行數。爲了實現該效果，它須要組合其餘的WebKit屬性。

5. -webkit-box-orient: vertical; 必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。`

超出div寬度範圍的文字進行省略號省略，在鼠標移上去之後顯示完整的內容

//超出範圍，對文本進行省略號隱藏
div{
    width: 100px;
    overflow: hidden;　　　　　　　　/*對超出容器的部分強制截取，高度不肯定則換行*/
    text-overflow: ellipsis;　　　　/*顯示省略符號來表明被修剪的文本。*/
    white-space: nowrap;　　　　　　/*禁止換行*/
 }

想顯示省略掉的

/*方法一：鼠標移上去時直接釋放寬度限制
 *但釋放寬度豈不是會影響其餘元素佈局
 */

div:hover{
     width: auto;
}

/*方法二：鼠標移上去時釋放overflowd的截取，按照本來樣式顯示，即換行
 *但換行會改變佈局，但稍微比上面不換行直接顯示好一點
 */

div:hover{
    text-overflow:inherit; 
    overflow: visible; 
    white-space: pre-line;     /*合併空白符序列，可是保留換行符。*/
}
/*方法三：鼠標移上去時會顯示title標籤中的文字內容，可是點醜，顯示速度有點慢，位置也不大好*/
<div title="超出文字省略顯示">超出文字省略顯示</div>

antd table中的顯示（column）：

{
          title: '班級名稱',
          dataIndex: 'className',
          width: 100,
          render: (text) => {
             if (text) {
                    return <span title={text}>{text.length > 5 ? text.substring(0, 5) + '...' : text}</span>;
               }
           }
}

.li1 {
    list-style:none;
    width:100px;
    white-space:nowrap;
    text-overflow:ellipsis; 
    -o-text-overflow:ellipsis; 
    overflow: hidden;
    margin-top:5px; 
}
 
.li2{
    list-style:none;
    margin-top:5px;
}

<ul>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">111122222222222222222222221222</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">45658798980000000000000899999999</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">dfgf66666666666666666666666666666</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">sdf88888888888888888888888888888888</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">hkjjk6888888888666666666666666666666</a></li>
</ul>