如何让Tooltip内容不自动换行，撑满视口宽度后再换行

要实现Tooltip先扩展至视口最大宽度，超出后再换行（包括超长单词拆分），只需调整.tooltiptext的CSS属性，以下是修改后的完整代码：

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  /* 核心：限制最大宽度为视口宽度 */
  max-width: 100vw;
  /* 允许超长单词拆分换行 */
  overflow-wrap: break-word;
  /* 确保文本正常换行 */
  white-space: normal;
  /* 可选：增强视觉体验的样式 */
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  /* 可选：避免Tooltip超出视口边缘 */
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 8px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

关键属性说明： #

• max-width: 100vw：将Tooltip的最大宽度锁定为当前视口宽度，确保它不会超出屏幕范围，优先利用可用宽度展示内容。
• overflow-wrap: break-word：当单个单词长度超过容器宽度时，允许拆分单词换行，避免因超长单词导致Tooltip提前换行。
• white-space: normal：确保文本在容器宽度不足时自动换行（默认值，但显式声明可避免其他样式干扰）。

可选定位优化： #

添加left: 50%; transform: translateX(-50%)可以让Tooltip相对于触发元素居中，避免出现在视口左侧或右侧时被截断；top: 100%; margin-top: 8px则将Tooltip定位在触发元素下方，保持视觉连贯性。

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