DNF私服诱惑背后的风险与理性游戏选择
2026/8/1 18:12:12
我想实现的效果
在很多应用中，列表项通常会同时存在两个元素：
- 左侧标题
- 右侧操作按钮
例如聊天历史记录：
鼠标移入：
我希望达到一种更自然的效果：
- 平时按钮隐藏，标题尽量显示更多内容；
- hover 后按钮出现，标题自动给按钮让出空间；
- 整个过程不发生布局跳动。
这个 Demo 提供了一种实现方式：
使用双层文字结构，将文字布局和文字显示分离。
示例代码
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>聊天列表文字遮罩效果</title><style>*{box-sizing:border-box;}body{background:#f7f7f7;font-family:Arial,"Microsoft YaHei",sans-serif;}/* 会话列表 */.history-item{position:relative;width:320px;height:38px;padding:0 10px;display:flex;align-items:center;border-radius:8px;cursor:pointer;user-select:none;color:#303133;transition:background-color .2s;}.history-item:hover{background:#eeeeee;}/* 图标 */.history-icon{width:20px;flex-shrink:0;}/* 标题容器 真实文字透明， 只负责撑开布局 */.title{position:relative;flex:1;margin-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:transparent;}/* 可见文字层 模拟遮罩区域 */.overlay{pointer-events:none;position:absolute;left:0;top:0;width:calc(100% - 70px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#303133;}/* hover时扩大显示区域 给右侧按钮腾位置 */.history-item:hover .overlay{width:100%;}/* 操作按钮 */.more{width:26px;height:26px;margin-left:4px;display:flex;justify-content:center;align-items:center;border:none;background:transparent;border-radius:6px;cursor:pointer;opacity:0;transition:.2s;}.history-item:hover .more{opacity:1;}.more:hover{background:#ddd;}/* 第二个按钮 */</style></head><body><h3>聊天列表文字遮罩效果</h3><divclass="history-item"><spanclass="history-icon">💬</span><spanclass="title">这是一个非常非常非常非常非常非常非常长的聊天标题，用来测试文字截断效果<spanclass="overlay">这是一个非常非常非常非常非常非常非常长的聊天标题，用来测试文字截断效果</span></span><buttonclass="more">📌</button><buttonclass="more">⋮</button></div></body></html>