让我来一步步帮你解决这两个问题：

1. 为什么max-width属性不生效？ #

你当前的.tooltiptext样式里同时设置了width: 120px和max-width: 500px，这是核心原因：

• width: 120px是固定宽度，它会强制元素保持120px的宽度，不管内容有多少。
• max-width的作用是限制元素的最大可达到宽度，只有当元素的自然宽度（由内容撑开的宽度）超过这个值时，它才会生效。但固定width会完全覆盖这种自适应逻辑，导致max-width根本没有发挥作用的机会。

另外还有个隐藏因素：你的Tooltip内容是连续无空格的字符串，这种文本在默认情况下不会自动换行，即使你去掉固定width，它也会直接撑破容器，这也会让你误以为max-width没生效。

2. 如何让Tooltip内容达到max-width后自动换行？ #

只需要对CSS做3处关键调整，就能实现需求：

修改后的完整CSS代码： #

.tooltip { 
  position: relative; 
  display: inline-block; 
  border-bottom: 1px dotted black; 
}
.tooltip .tooltiptext { 
  visibility: hidden; 
  /* 1. 去掉固定width，保留max-width让宽度自适应 */
  max-width: 500px; 
  background-color: #555; 
  color: red; 
  text-align: center; 
  border-radius: 6px; 
  padding: 5px 10px; /* 增加左右内边距，让文本不会贴边 */
  position: absolute; 
  z-index: 1; 
  bottom: 125%; 
  left: 50%; 
  /* 2. 替换margin-left为transform，实现自适应宽度下的水平居中 */
  transform: translateX(-50%); 
  opacity: 0; 
  transition: opacity 0.3s; 
  /* 3. 添加强制换行属性，处理连续无空格文本 */
  word-break: break-all; 
  /* 或者用 overflow-wrap: break-word; 更适合英文单词拆分 */
}
.tooltip .tooltiptext::after { 
  content: ""; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  margin-left: -5px; 
  border-width: 5px; 
  border-style: solid; 
  border-color: #555 transparent transparent transparent; 
}
.tooltip:hover .tooltiptext { 
  visibility: visible; 
  opacity: 1; 
}

调整说明： #

• 去掉固定的width: 120px，只保留max-width: 500px：让Tooltip宽度根据内容自适应，但最大不超过500px。
• 用transform: translateX(-50%)替换margin-left: -60px：原来的margin-left是基于120px宽度计算的居中值，现在宽度自适应后，transform能完美实现水平居中，不管Tooltip最终宽度是多少。
• 添加word-break: break-all（或overflow-wrap: break-word）：强制连续无空格的文本在达到容器宽度时自动换行，前者会拆分任意字符，后者会尽量保留完整单词再换行，可根据需求选择。

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