JS 文字超出部分用省略号替代 鼠标悬停时显示全部内容
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>
更多推荐
已为社区贡献1条内容
所有评论(0)