css鼠标悬停图文展示效果
坚持跑步
如题，要做到类似如下效果
鼠标移入前
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
通过以上属性为超过行宽的span规定不换号和加上省略号，
鼠标移入后
将white-space改成normal让文本可以换行，再加上如下属性：
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
以上属性使span不能超过两行，超过加上省略号，
同时让span向上平移一定距离
鼠标移出后
将span往下平移回原位置，同时将属性还原为鼠标移入前
这样就实现了gif中的效果，但是gif中的那个span是没有背景色的，如果加上背景色，你就会发现鼠标移出后第二行突然消失，这是因为white- space不支持transcation，就会生硬，如果非要加上背景色，可以待向下平移动画完成后再改变white- space，这样第二行被隐藏了就看不出生硬了，
如下效果
重点就是监控向下平移的动画结束后修改white- space
showMore($event) {
let sheetTitle = $event.currentTarget.querySelectorAll(".song-sheet-title")[0];
let titleLimit = $event.currentTarget.querySelectorAll(".title-limit")[0];
if (sheetTitle.clientWidth < titleLimit.offsetWidth + 4) { // 文本超过容器宽度
sheetTitle.style.transform = "translate(0, -24px)";
sheetTitle.style.whiteSpace = "normal";
sheetTitle.classList.add("showMore");
}
},
removeMore($event) {
let sheetTitle = $event.currentTarget.querySelectorAll(".song-sheet-title")[0];
sheetTitle.classList.remove("showMore");
sheetTitle.style.transform = "translate(0,0)";
const changeRowShow = function () {
sheetTitle.removeEventListener('transitionend', changeRowShow, false);
// whiteSpace不支持动画, 所以多行会瞬间缩小到一行引起视觉突兀, 所以等待向下的动画完成后修改这个样式
sheetTitle.style.whiteSpace = "nowrap";
}
sheetTitle.addEventListener('transitionend', changeRowShow, false);
}编辑于 2021-12-02 23:17
