Html 如果文本大于允许值，则使用css在溢出时淡出文本

我正在尝试创建一个文本淡出效果，当文本量超过行可以处理的范围时。我通过混合使用

最大高度

、

溢出

和

线性梯度

来实现这一点。像这样的

max-height:200px;
overflow:hidden;
text-overflow: ellipsis;
background: -webkit-linear-gradient(#000, #fff);

这个。我正试图达到与此类似的效果

我有点接近了。问题是，在我的例子中，文本从一开始就开始淡出，我希望只有当它真的接近最大大小时，它才会开始淡出。假设它已经是150px，那么就开始淡出。另外，我只使用

-webkit

前缀，并且我假设可以为其他渲染引擎添加其他前缀

在纯CSS中有什么方法可以做到这一点吗？

我建议您使用

您正在寻找的可能是：

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

---

如果没有按照您的意愿工作，请将这些css复制并粘贴到url（css窗口）中，并随意修改。

您的代码是正确的，只是必须设置线性渐变百分比

background: -webkit-linear-gradient(top,#000 70%, #fff);

试试小提琴链接

你也可以像这样用像素表示

 background: -webkit-linear-gradient(top,#000 140px, #fff);

---

两者都是一样的

我想你是在找这样的东西，对吧

---

我建议这样做：

.row:before {
  content:'';
  width:100%;
  height:100%;    
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(transparent 150px, white);
}

将渐变应用于绝对定位的伪元素（

：after

），该伪元素从顶部定位为160px，高度为40px–这样，它就不会在较短的框中显示（因为它们的

最大高度

与

溢出：隐藏

）。渐变本身是从完全透明（

rgba（0,0,0,0）

）到纯黑色

.row{
    position:relative;
    /* … */
}
.row:after {
    content:"";
    position:absolute;
    top:160px;
    left:0;
    height:40px;
    width:100%;
    background: linear-gradient(rgba(0,0,0,0), #000);
}

---

看起来您的要求只是淡出从某个高度（约150px）开始的文本，在该高度显示的文本（如果有）被视为溢出。因此，您可以尝试在文本区域顶部使用某种透明的线性渐变层，我们可以使用伪元素

：before

以整洁的方式实现这一点，如下所示：

.row:before {
  content:'';
  width:100%;
  height:100%;    
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(transparent 150px, white);
}

---

如果不需要依赖百分比值，请使用

框阴影

而不是

背景图像

。它可以让用户与淡入淡出的东西后面的元素进行交互，而不需要

指针事件：none

（）：

但请注意，框阴影可能会减慢滚动：

---

我使用此方法使底部透明

.row{
位置：相对位置；
宽度：300px；
边缘底部：5px；
垫底：5px；
边框底部：3px实心#777；
最大高度：200px；
溢出：隐藏；
颜色：#fff；
背景：#000；
}
.罗：之后{
内容：“；
位置：绝对位置；
顶部：137px；
左：0；
高度：40px；
宽度：100%；
背景：-webkit线性梯度（rgba（255，255255，.4），rgba（255，255，255，1））；
}

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
Lorem ipsum dolor sit amet，圣公会精英，sed

我有一个类似的问题，引导按钮有垂直梯度，悬停时也有梯度变化。这对我有用

<button class="btn btn-success" style="width:250px">
      <div class="faderflow">
         SOME TEXT THAT'S TOO LONG FOR THE BUTTON
      </div>
</button>



.faderflow {
    overflow: hidden;

   /* same color as text (white) */
    background: linear-gradient(to right, rgb(255, 255, 255) 80%,rgba(255, 255, 255, 0) 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;

   /* overwrite the bootstrap text shadow  */
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
}

某些文本对于按钮来说太长
法德福先生{
溢出：隐藏；
/*与文本颜色相同（白色）*/
背景：线性梯度（向右，rgb（255，255，255）80%，rgba（255，255，255，0）100%）；
背景剪辑：边框框；
-webkit背景剪辑：文本；
-webkit文本填充颜色：#fff0；
/*覆盖引导文本阴影*/
文本阴影：0-1px0RGBA（255,255,255,0.2）；
}

---

我使用了从reddit页面派生的这个方法&效果很好

.fade{
-webkit掩模图像：线性梯度（180度，#000 60%，透明）；
}

文本

文本

文本

文本

文本

文本

文本

文本

文本

文本

检测CSS中何时发生溢出是不可能的，除非我们必须结合CSS使用一些布局技巧。如果你的意思是，如果高度达到150px左右，则认为会发生溢出，那么文本应该淡出，这是你的解决方案，它在文本顶部使用渐变层，适用于所有支持线性渐变的浏览器，因此，我认为这比您使用

-webkit background clip:text

的解决方案要好，后者仅受基于webkit的浏览器支持（我认为）：我制作了一些类似于请求的笔：&问题是我需要以像素为单位指定起点，而不是百分比。如果文本太小，它仍然会淡出。很明显，您建议的命令语法不允许这样做。您可以使用insteed这个解决方案，它可以在所有浏览器上工作（除非pseudo元素在后面）：。。只需添加一个绝对定位的div，其高度与您希望在包裹内对齐，底部以渐变为背景。ea

<button class="btn btn-success" style="width:250px">
      <div class="faderflow">
         SOME TEXT THAT'S TOO LONG FOR THE BUTTON
      </div>
</button>



.faderflow {
    overflow: hidden;

   /* same color as text (white) */
    background: linear-gradient(to right, rgb(255, 255, 255) 80%,rgba(255, 255, 255, 0) 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;

   /* overwrite the bootstrap text shadow  */
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
}