思路:
1. 设置容器不换行且溢出时隐藏,设置文字溢出时显示省略号;
2. div添加title属性以显示完整内容
代码:
css样式
.tooltip {
font-size: 15px;
overflow: hidden;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
div:hover .tooltip {
display: block;
/* 当鼠标悬停时,显示提示框 */
cursor: pointer;
}
页面js
<div
className="tooltip"
title={robotInfo.robotId}
>
机器人: {robotInfo.robotId}
</div>