css - 文本溢出效果 - 溢出省略选中或hover全显

要求

文本溢出

1. 显示...
2. 鼠标移入项和当前激活项显示全部

实现

flex-shrink

预览

width（效果不佳）

• 存在问题
  • 效果卡顿，不流畅
  • 项数量少时，宽度异常
  • 特殊情况闪屏
    • 项数量少时鼠标移入取消宽度可能会使鼠标不在内容区域，导致频繁hover切换闪屏

variable.scss

// variable.scss
@mixin flexXY($x:space-between, $y:center) {
    display: flex;
    justify-content: $x;
    align-items: $y;
}

@mixin text_ellipsis() {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}