CSS实现文字展示多余部分用三个点展示
效果图
Snipaste_2020-07-26_09-41-18.png
鼠标悬浮展示
Snipaste_2020-07-26_09-43-56.png
核心思路
- 固定宽度
- 不换行
- 溢出隐藏
- 悬浮展示
代码
span {
font-size: 18px;
font-weight: 410;
color: #1e1e1e;
margin-right: 60px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
width: 100px;
}
span:hover {
text-overflow: inherit;
overflow: visible;
}
