限制Div内文本显示并实现hover时展示完整内容的问题解决

问题根源在于你给父元素.tooltip-pr设置了overflow:hidden，而tooltip作为它的绝对定位子元素，当超出父元素范围时会被裁剪。以下是两种简单的解决方法：

方案一：拆分文本容器与tooltip容器 #

把需要截断的文本单独放在一个子容器中，只给这个子容器设置高度和溢出隐藏，父元素不再设置overflow:hidden。这样tooltip作为父元素的子元素，就不会被父元素的溢出规则限制：

<div class="tooltip-pr" style="max-width: 220px;">
  <div class="truncated-text">SOME LONG TEXT TO DISPLAY ON HOVER</div>
  <span class="tooltiptext-pr">
    SOME LONG TEXT TO DISPLAY ON HOVER
  </span>
</div>

.tooltip-pr {
  position: relative;
  display: inline-block;
  border: 1px solid;
}
/* 只给文本容器设置截断规则 */
.truncated-text {
  height: 20px;
  overflow: hidden;
}
.tooltip-pr .tooltiptext-pr {
  visibility: hidden;
  background-color: black;
  color: #fff;
  position: absolute;
  top: calc(100% + 5px); /* 与父元素保持间距 */
  left: 0;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 4px;
}
.tooltip-pr:hover .tooltiptext-pr {
  visibility: visible;
}

方案二：让tooltip脱离父元素的溢出限制 #

如果不想调整DOM结构，可以修改tooltip的定位上下文：将tooltip移出当前父元素，放在body等更高层级容器下，通过JS或者CSS兄弟选择器，监听原父元素的hover状态来控制tooltip的显示。这种方式适合DOM结构无法调整的场景，不过需要额外的关联逻辑。

补充：可以给tooltip添加z-index: 999，确保它不会被页面其他元素遮挡。

内容的提问来源于stack exchange，提问作者Liron C