html - text-overflow 属性的 fade 值是如何工作的？

Question

我需要在每个 flex-child 中有一行描述，为此我想使用这个 fade() 值。但它不起作用。

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

我希望它会褪色，变成透明文本。还是对上面的值有误解？

Answer 1

fade 仅处于“实验阶段”，为not yet supported通过任何浏览器。

相反，您可以向位于文本顶部的 flex-item 添加一个伪元素，并具有背景渐变。

我还添加了 pointer-events: none; 因此您仍然可以选择下面的文本。

要更改渐变的大小，只需更改 .flex-item::after 的 width 值即可。

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