div文字超出省略覆盖tip提示

当HTML中的`<div>`元素内容过多导致溢出容器时，可以使用CSS技巧创建文本溢出省略并添加提示信息。通常的做法是结合CSS的`overflow`, `text-overflow`, 和 `white-space` 属性。例如：

.container {
  width: 200px; /* 容器宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 文本超出时显示省略号 */
  white-space: nowrap; /* 禁止换行，让所有文字挤在一起 */
}

.container::after {
  content: attr(data-tooltip); /* 使用数据属性（data-tooltip）作为提示信息 */
  position: absolute;
  bottom: 100%; /* 提示位于底部 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #f9f9f9;
  padding: 4px;
  border-radius: 3px;
}

在这个例子中，当你鼠标悬停在容器上时，`data-tooltip`属性对应的提示信息会显示出来，提供详细的内容。如果你想要自定义提示框样式，可以调整`::after`伪元素的样式。