JS 文字超出部分用省略号替代 鼠标悬停时显示全部内容

文字超出部分用省略号替代

1. 单行

<div style='width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;'>内容</div> 

• width: 宽度;（指定每行宽度）
• overflow: hidden（溢出部分隐藏）
• white-space: nowrap;（同一行内显示所有文本，禁止换行）
• text-overflow:ellipsis;（用省略号代替溢出文本）

2. 多行

<div style='display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical;'>内容</div> 

• display: -webkit-box;（CSS3新特性，流体布局可以自适应宽度）
• overflow: hidden（溢出部分隐藏）
• -webkit-line-clamp: 行数;（CSS3新特性，把块容器中的内容限制为指定的行数，多余部分显示省略号）
• -webkit-box-orient: vertical;（指定div的所有子元素的排列方式，vertical表示纵向排列）

鼠标悬停时显示全部内容

使用div元素的title属性即可

<div 
	title='内容'
	style='display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical;'
>内容</div>