设置-webkit-scrollbar后Safari文本换行异常，求与Chrome一致的解决方案

设置-webkit-scrollbar自定义样式后，Chrome中文本保持不换行，但Safari会自动换行，即便给.title设置了max-width也无法生效，以下是问题分析和解决方案：

问题根源 #

1. Safari与Chrome对带滚动条容器的宽度计算逻辑存在差异，自定义滚动条会占用容器内部宽度，导致.title的可用空间被挤压；
2. .title上的white-space: pre-wrap和word-break: break-all属性本身具备换行触发逻辑，Chrome在容器宽度充足时不会触发，但Safari的宽度计算偏差触发了换行。

解决方案 #

修改以下CSS规则即可让Safari表现与Chrome一致：

1. 给.chart-tooltip添加宽度控制，避免滚动条挤压内部空间：

.chart-tooltip {
  position: absolute;
  padding: 12px;
  max-height: 64px;
  overflow-y: auto;
  width: fit-content; /* 让容器自适应内容宽度 */
  min-width: 200px; /* 可选，防止容器过窄 */
}

2. 调整.title的文本属性，强制不换行：

.title {
  max-width: 300px;
  white-space: nowrap; /* 替换pre-wrap，强制文本单行显示 */
  overflow: hidden; /* 可选，超出宽度时隐藏内容 */
  text-overflow: ellipsis; /* 可选，超出部分显示省略号 */
}

3. 给表格单元格添加不换行规则，稳定表格布局：

.chart-tooltip td {
  white-space: nowrap;
}

修改后的完整代码 #

<html>
  <body>
    <div class="chart-tooltip">
      <div>
        <table cellspacing="0" >
          <tbody>
            <tr>
              <td align="right">
                <div class="title-container">
                  <span class="icon"></span>
                  <span class="title">San Francisco</span>
                </div>
              </td>
              <td>
                <span class="value">0</span>
              </td>
            </tr>
            <tr>
              <td align="right">
                <div class="title-container">
                  <span class="icon"></span>
                  <span class="title">San Francisco</span>
                </div>
              </td>
              <td>
                <span class="value">0</span>
              </td>
            </tr>
            <tr>
              <td align="right">
                <div class="title-container">
                  <span class="icon"></span>
                  <span class="title">San Francisco</span>
                </div>
              </td>
              <td>
                <span class="value">0</span>
              </td>
            </tr>
            <tr>
              <td align="right">
                <div class="title-container">
                  <span class="icon"></span>
                  <span class="title">San Francisco</span>
                </div>
              </td>
              <td>
                <span class="value">0</span>
              </td>
            </tr>
            <tr>
              <td align="right">
                <div class="title-container">
                  <span class="icon"></span>
                  <span class="title">San Francisco</span>
                </div>
              </td>
              <td>
                <span class="value">0</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      </div>
  </body>
  <style>
    .chart-tooltip {
      position: absolute;
      padding: 12px;
      max-height: 64px;
      overflow-y: auto;
      width: fit-content;
      min-width: 200px;
    }

    .chart-tooltip::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
    }

    .chart-tooltip::-webkit-scrollbar-thumb {
        background-color: #d1d5e6;
        border: solid 4px transparent;
        border-radius: 12px;
    }

    .title-container {
      line-height: 18px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-top: 4px;
    }

    .icon {
      height: 5px;
      width: 11px;
      display: inline-block;
      margin-right: 8px;
      background-color:#FF8F6C;
      border:1px solid #FF8F6C;
    }

    .title {
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .value {
      display: inline-block;
      padding-left: 16px;
    }

    .chart-tooltip td {
      white-space: nowrap;
    }
  </style>
</html>

关键说明 #

• width: fit-content确保容器根据内容自动调整宽度，避免滚动条占用空间导致内部元素宽度被压缩；
• white-space: nowrap从根源上强制文本单行显示，解决Safari的换行问题；
• 表格单元格设置white-space: nowrap，保证Safari中表格布局稳定，不会因单元格收缩触发文本换行。

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