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>