How does the fade value of the text-overflow property work?

Question

I need a one line description in every flex-child, and for that I wanted to use this fade() value. But it doesn't work.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}

.flex-child {
  border: 1px black solid;
  width: 40%;
  max-height: 3rem;
  padding: 10px;
  margin: 5px;
  overflow: hidden;
}

.flex-child p {
  font-weight: bold;
  font-size: 1rem;
  overflow: hidden;
  text-align: justify;
  white-space: nowrap;
  text-overflow: fade(10%);
}

<div class="flex-container">
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>

I expect it to fade, changing to a transparent text. Or is it a misunderstanding of the above value?

Answer 1

fade is only in the "experimental phase" and is not yet supported by any browser.

Instead, you could add a pseudo-element to your flex-items that sits on top of the text, and has a background gradient.

I've also added pointer-events: none; so you can still select the text beneath.

To change the size of the gradient, simply change the width value of .flex-item::after.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}

.flex-child {
  border: 1px black solid;
  width: 40%;
  max-height: 3rem;
  padding: 10px;
  margin: 5px;
  overflow: hidden;
  position: relative;
}

.flex-child::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 10px; /* match parent padding-right */
  height: 100%;
  width: 100px;
  background-image: linear-gradient(to right, rgba(255,255,255,0), white);
  z-index: 2;
  pointer-events: none;
 }

.flex-child p {
  font-weight: bold;
  font-size: 1rem;
  overflow: hidden;
  text-align: justify;
  white-space: nowrap;
}

<div class="flex-container">
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>