省略号现在在 Safari 中以渐变文本显示

Question

我有一个带有用户图标和电子邮件的 HTML 块，文本颜色是渐变的。问题是，当我将屏幕缩小到最小尺寸时，省略号在 Safari 中不会显示，尽管它在 Chrome 和 Firefox 中运行良好（以及在纯色的 Safari 中）。点在那里，但它们是透明的。

有办法让它以某种方式起作用，还是不可能？

<div class="container">
  <div class="icon"></div>
  <div class="text">[email protected]</div>
</div>


.container {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  background: red;
  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;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

这是包含我的确切组件的 Codepen：https://codepen.io/va-deem/pen/vYMagzp

Answer 1

点的颜色是从设置溢出的元素中设置的颜色中选取的。

所以这个片段将溢出设置和文本剪辑设置分开。

选择的颜色当然不是完美匹配，所以这并不理想，但可能比根本看不到点要好。

<div class="card">

  <!-- With solid color - all Ok -->
  <div class="container">
    <div class="icon"></div>
    <div class="text">[email protected]</div>
  </div>


  <!-- With gradient color - ellipsis is not visible in Safari -->
  <div class="container2">
    <div class="icon2"></div>
    <div class="text">
      <span class="text2">[email protected]</span>
    </div>
  </div>


</div>
<style>
  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    border: 1px solid black;
    margin: 10px auto;
    padding: 20px;
  }
  
  .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 {
    color: #21b568;
    font-size: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* second */
  
  .container2 {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    background: red;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 20px;
    background-color: #D3D3D3;
  }
  
  .icon2 {
    flex-shrink: 0;
    height: 20px;
    width: 20px;
    background-color: blue;
    border-radius: 50%;
    margin-right: 5px
  }
  
  .text2 {
    font-size: 24px;
    background: linear-gradient(93deg, #2091f6 -0.06%, #21b568 99.94%);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  */
  }
</style>