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

`

顯示的內容

` 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>