如何让div边框精准包裹文本，同时支持最大宽度与长词单独换行？

要实现tooltip盒子精准贴合文本、限制最大宽度且仅拆分长词的效果，使用以下CSS属性组合即可解决：

.tooltip {
  /* 限制最大宽度为350px */
  max-width: 350px;
  /* 让盒子宽度自适应内容，实现精准包裹 */
  width: fit-content;
  /* 仅在长词超出容器时拆分，短词保持完整 */
  word-wrap: break-word;
  /* 确保文本正常换行 */
  white-space: normal;
  /* 以下是tooltip基础样式，可按需调整 */
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

关键属性说明： #

• width: fit-content：核心属性，让盒子宽度完全贴合文本内容，不会出现多余空白；当内容长度超过max-width时，自动触发换行
• word-wrap: break-word：区别于word-break: break-all，它只会在单个长词（如超长URL）超出容器宽度时才拆分，普通短词保持完整排版，避免不必要的单词拆分
• max-width: 350px：确保tooltip不会过宽，长内容自动换行到350px宽度内

测试示例： #

<!-- 单个词场景 -->
<div class="tooltip">示例</div>

<!-- 普通短文本场景 -->
<div class="tooltip">这是一段由多个短词组成的普通文本，测试正常排版效果</div>

<!-- 超长URL场景 -->
<div class="tooltip">https://thisisaverylongurlthatmustbebrokendowninto multiplelineswithoutbreakingnormalwords.com/path/to/long/resource</div>

<!-- 混合内容场景 -->
<div class="tooltip">这是混合内容示例：既有普通短词，也有超长链接https://anotherverylongexampleurlfordemo.com/test/test/test，验证排版是否正常</div>

兼容说明： #

该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），无需额外前缀，完美覆盖从单个词到长段落的各种tooltip内容场景。

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