Search code examples
csssafaricross-browserellipsis

Ellipsis is now shown with gradient text in Safari

I have a HTML block with the user icon and email, and the text color is gradient. The problem is when I shrink the screen to its minimum size, ellipsis is not displayed in Safari, although it works fine in Chrome and Firefox (and in Safari with solid color). The dots are there but they are transparent.

Is there a way to may it work somehow, or is it impossible?

<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;
}

sample with solid and gradient text in safari

Here is the Codepen with my exact component: https://codepen.io/va-deem/pen/vYMagzp

Solution

  • The color for the dots is picked up from the color set in the element that sets overflow.

    So this snippet separates the overflow setting and the text clip setting.

    The color chosen is not a perfect match of course so this is not ideal, but may be better than not seeing the dots at all.

    <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>