设置max-width的tooltip内容换行后如何实现fit-content宽度适配

方法1：使用fit-content直接适配（推荐，现代浏览器兼容） #

直接给tooltip容器添加以下CSS属性即可：

.tooltip {
  max-width: 400px;
  width: fit-content;
  box-sizing: border-box; /* 若设置了padding可添加该属性避免宽度溢出 */
}

核心逻辑是width: fit-content会让容器宽度优先贴合内容实际尺寸，同时max-width会限制最大宽度不超过400px，文本换行后容器会自动收缩到文本实际占有的宽度，不会残留右侧空白。
该属性兼容Chrome 94+、Firefox 94+、Safari 15.4+及以上所有主流现代浏览器。

方法2：inline-block兼容方案（适配低版本浏览器） #

如果需要兼容更早的浏览器版本，可以通过两层容器结构实现：

/* 外层限制最大宽度 */
.tooltip-wrap {
  max-width: 400px;
}
/* 内层贴合内容宽度 */
.tooltip {
  display: inline-block;
  box-sizing: border-box;
}

inline-block元素默认宽度会自动贴合内容，外层容器的max-width会限制整体最大宽度，同样可以实现换行后自动收缩的效果。

优化补充 #

如果希望文本换行后分布更均匀，进一步减少空白，可以搭配text-wrap属性：

.tooltip {
  text-wrap: pretty; /* Chrome 113+、Firefox 121+、Safari 17.4+支持 */
}

注意：不要给tooltip容器设置width: 100%或者固定宽度值，否则会覆盖内容适配逻辑，无法实现自动收缩效果。

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