如何仅用CSS实现鼠标悬停1秒后显示完整截断文本？

• 过渡规则写法错误：transition-delay被放置在:hover选择器内，仅当元素处于悬停状态时才会加载过渡配置。从非悬停切换到悬停的瞬间，属性变化不会经过过渡计算，直接生效。
• 离散属性的过渡特性认知偏差：position属于不可过渡的离散属性，从static切换为absolute是瞬间完成的。一旦切换，父元素的overflow:hidden裁剪效果会立即对该元素失效，完整文本直接暴露——哪怕背景色配置了延迟，无遮挡的黑色文本依然会在悬停瞬间完全显示，达不到预期的1秒延迟效果。

利用“无偏移的绝对定位元素，视觉位置与原静态位置完全重合”的CSS特性，配合可过渡属性的延迟配置，无需JavaScript即可实现目标效果。

修改后的CSS代码 #

.main {
  display: flex;
  justify-content: center;
}

.main .parent {
  /* 补充相对定位，作为绝对定位子元素的位置参考 */
  position: relative;
  display: block;
  width: 200px;
  border-right: 1px solid rgb(237, 237, 236);
  white-space: nowrap;
  min-height: 32px;
  cursor: default;
  height: 32px;
  padding: 5px 8px 6px;
  font-size: 14px;
  overflow: hidden;
  background: #fff;
}

.main .parent .cell {
  display: inline-block;
  line-height: 1.5;
  white-space: nowrap;
  word-break: normal;
  pointer-events: none;
  /* 过渡规则写在基础选择器内，保证双向切换都能触发过渡计算 */
  transition: 
    width 0.3s ease,
    background-color 0.3s ease,
    padding-right 0.3s ease;
  /* 默认宽度与父元素内容区一致，实现截断效果 */
  width: calc(100% - 16px);
}

.main .parent:hover .cell {
  /* 无偏移设置的绝对定位，视觉位置与原静态位置完全一致，无跳动 */
  position: absolute;
  z-index: 1;
  /* 所有可过渡属性配置1秒延迟，等悬停满1秒后才开始变化 */
  transition-delay: 1s;
  /* 宽度切换为文本实际宽度，展开完整内容 */
  width: max-content;
  padding-right: 10px;
  background: gray;
}

对应的HTML代码（无需修改原有结构） #

<main class="main">
  <div class="parent">
    <span class="cell">
      In publishing and graphic design, Lorem ipsum is a placeholder text
      commonly used to demonstrate the visual form of a document or a typeface
      without relying on meaningful content.
    </span>
  </div>
</main>

效果说明 #

• 非悬停状态下，元素保持原有截断文本的展示效果，与改造前完全一致。
• 鼠标悬停瞬间，元素仅完成绝对定位的切换，因为无偏移设置，视觉位置无任何变化，用户感知不到切换动作。
• 所有可过渡的属性（宽度、背景色、右侧内边距）因配置了1秒延迟，会在悬停满1秒后才开始生效：宽度从固定的父元素内容区宽度，平滑过渡到文本实际宽度，展开完整内容；背景从透明渐变为灰色；右侧增加内边距，不会让文本贴边显示。
• 绝对定位的元素不再受父元素overflow:hidden的裁剪限制，展开的完整文本可以正常显示在父元素边界外。

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