Safari浏览器渐变文本省略号不显示问题求助

问题描述 #

我有一个包含用户图标和邮箱的HTML块，文本应用了渐变颜色效果。当屏幕缩小到最小尺寸时，Safari浏览器中省略号无法显示（Chrome和Firefox表现正常，且Safari使用纯色文本时省略号也能正常显示），实际省略号存在但呈透明状态。

原始代码 #

<div class="container">
  <div class="icon"></div>
  <div class="text">userwithalonglonglonglonglongname@example.com</div>
</div>

.container {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 10px;
  border-radius: 15px;
  margin-bottom: 20px;
  background-color: #D3D3D3;
}

.icon {
  flex-shrink: 0;
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  margin-right: 5px
}

.text {
  font-size: 24px;
  background: linear-gradient(93deg, #2091f6 -0.06%, #21b568 99.94%);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

解决方法 #

核心思路是将文本渐变样式与溢出省略逻辑分离，避免在同一个元素上同时使用-webkit-text-fill-color: transparent和text-overflow: ellipsis，以此规避Safari的渲染bug。

修改后的代码 #

HTML（新增内部span包裹文本）

<div class="container">
  <div class="icon"></div>
  <div class="text"><span class="gradient-content">userwithalonglonglonglonglongname@example.com</span></div>
</div>

CSS（拆分样式职责）

.container {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 10px;
  border-radius: 15px;
  margin-bottom: 20px;
  background-color: #D3D3D3;
}

.icon {
  flex-shrink: 0;
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  margin-right: 5px
}

.text {
  font-size: 24px;
  /* 仅负责处理文本溢出和省略号 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 给省略号设置基础颜色，可与渐变起始色一致 */
  color: #2091f6;
}

.gradient-content {
  /* 仅负责文本渐变效果 */
  background: linear-gradient(93deg, #2091f6 -0.06%, #21b568 99.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

原理说明 #

Safari在渲染同时应用了-webkit-text-fill-color: transparent和text-overflow: ellipsis的元素时，会错误地将生成的省略号也设置为透明。通过将渐变样式转移到内部span元素，外部.text元素仅处理溢出和省略号，省略号会继承.text的color属性，从而正常显示，同时内部文本的渐变效果不受影响。

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