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

【问题标题】：Fading out text on overflow with css if the text is bigger than allowed如果文本大于允许值，则在溢出时使用 css 淡出文本
【发布时间】：2014-05-13 12:50:12
【问题描述】：

我正在尝试在文本量大于行可以处理的情况下创建文本淡出效果。我通过max-height、overflow 和linear-gradient 的混合实现了这一目标。像这样。

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

full fiddle is available。我正在尝试达到类似于的效果@

我有点接近。问题是，在我的情况下，文本从一开始就开始淡出，我希望它只有在真正接近最大尺寸时才开始淡出。如果它已经是 150 像素，可以说开始淡出。此外，我只使用了-webkit 前缀，并且我认为可能还有其他前缀可以为其他渲染引擎添加。

有没有办法在纯 CSS 中做到这一点？

【问题讨论】：

检测 CSS 中何时发生溢出是不可能的，除非我们必须结合 CSS 使用一些布局技巧。如果您的意思是如果高度达到约 150px 时会考虑溢出，那么文本应该淡出，这是适合您的解决方案，它在文本顶部使用渐变层，它适用于所有支持线性的浏览器-渐变，所以我认为它比您使用 -webkit-background-clip:text 的解决方案更好，它仅受基于 webkit 的浏览器支持（我认为）：jsfiddle.net/b9vtW/1
我做了几支类似要求的笔：pen 1 & pen 2

标签： html css

【解决方案1】：

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

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

Fiddle

【讨论】：

非常好。我还必须在.row 上设置position:relative。一个问题是，覆盖的伪元素使得无法点击原始元素内的链接。为了解决这个问题，我在伪元素的样式中添加了pointer-events: none。
@joeytwiddle - 感谢pointer-events 提示。作为旁注，pointer-events 和 linear-gradients 在 IE9+ 中受支持，:before 在 IE8+ 中受支持，因此 IE8 用户将获得伪元素但看不到渐变并且无法单击任何内容在它下面。建议检测 IE8 并删除伪元素。
如果您想知道为什么这在 iOS Safari 上不起作用，那是因为那里不允许使用 transparent。请改用 rgba(255,255,255,0)，根据此 SO 帖子：stackoverflow.com/questions/16816648/…
只是想指出一些事情：rgba 值（最后一个值）中的不透明度来自0 - 1.0，以防您不希望它完全淡出，如果您想要链接，例如文本下方的更多链接，然后您可以使用上面的样式来表示 p 标签而不是 .row
此文本溢出：省略号；内容： ””;在您的课程行中没有用处

【解决方案2】：

我使用了源自 reddit 页面的这种方法，效果很好

.fade {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  }

<div>
    <div class="fade">
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    </div>
</div>

【讨论】：

完美。超级简单。如您所演示的，适用于具有大量包装文本或单行的单个 div。我想是挑剔的，它显示了文本是否溢出的淡入淡出。将 60% 更改为 95% 似乎可以减轻很多。不需要指针事件：无；。

【解决方案3】：

我建议这样：

将渐变应用于绝对定位的伪元素 (:after)，该伪元素位于距顶部 160 像素处，高度为 40 像素 - 这样，它根本不会显示在较短的框中（因为它们的 @ 987654323@ 与overflow:hidden 结合使用）。渐变本身是从完全透明 (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);
}

http://jsfiddle.net/b9vtW/2/

【讨论】：

很好，但如果你使用bottom:0; 而不是top:160px; 那么它会更通用。渐变只会占据父元素的底部，height 是渐变的高度。
@nux 如果元素具有最大高度且没有高度，则使用底部而不是顶部将无法按预期工作。如果您使用底部：0，即使文本只占一行，当它应该在最后一行（可能是第 3、第 4 等）上具有渐变时，也会应用渐变

【解决方案4】：

我认为您正在寻找这样的东西，对吧？

http://jsfiddle.net/QPFkH/

.text {
    position:relative;
    width:200px;
    max-height:10em;
    overflow:hidden;
}
.shadow {
    position:absolute;
    top:8em;
    width:100%;
    height:2em;
    background: -webkit-linear-gradient(transparent, white);
    background: -o-linear-gradient(transparent, white);
    background: -moz-linear-gradient(transparent, white);
    background: linear-gradient(transparent, white);
}

【讨论】：

【解决方案5】：

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

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

试试小提琴链接

http://jsfiddle.net/ShinyMetilda/kb4fL/1/

您也可以像这样以像素为单位指定它

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

两者的作用相同

【讨论】：

【解决方案6】：

如果您不需要依赖百分比值，请使用 box-shadow 而不是 background-image。它可以让用户与你的 fading-thingy 背后的元素进行交互，而无需 pointer-events: none (http://caniuse.com/#feat=pointer-events)：

box-shadow: 0 0 2em 1em #f00;
height: 0;

但请注意，box-shadow 会减慢滚动速度：

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

【讨论】：

【解决方案7】：

我建议你使用http://www.colorzilla.com/gradient-editor/。

您正在寻找的可能是：

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 窗口）中并随意修改。

【讨论】：

问题是我需要以像素为单位指定起点，而不是百分比。如果文本太小，它仍然会淡出。显然，您建议的命令语法不允许这样做。
好吧。您可以使用此解决方案，该解决方案可以在所有浏览器上运行（除非之后的伪元素）：jsfiddle.net/b9vtW/3.. 只需添加一个绝对定位的 div，其中您希望在 wrap 内的高度与底部对齐，渐变作为背景。简单安全

【解决方案8】：

我在引导按钮上遇到了类似的问题，该按钮具有垂直渐变，并且悬停时渐变也会发生变化。这对我有用。

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

https://codepen.io/andyg2/pen/qGmKKN

【讨论】：

感谢您的回答，当您在背景上有图像/渐变时，这确实是正确的方法。唯一的问题是当您有多种颜色的文本时......
获得了更好的方法 - mask-image: linear-gradient(to bottom, white, transparent);

【解决方案9】：

我用这个方法让底部透明。

http://jsfiddle.net/IAMCHIEF/x7qLon18/4/

.row{
    position:relative;
    width: 300px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 3px solid #777;
    max-height:200px;
    overflow:hidden;
    color:#fff;
    background:#000;
}
.row:after {
  content: "";
position: absolute;
top: 137px;
left: 0;
height: 40px;
width: 100%;
background: -webkit-linear-gradient(rgba(255, 255,255, .4), rgba(255, 255, 255, 1));
}

<div class="row">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="row">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="row">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
</div>

【讨论】：

【解决方案10】：

我的渐变变体出现溢出

.row {
  width: 300px;
  max-height: 200px;
  position: relative;
  display: flex;
  flex-flow: column-reverse wrap;
  overflow: hidden;
}

.content {
  max-height: 100%;
  overflow: hidden;
}

.background {
  width: 100%;
  height: 1px;
  position: relative;
}

.background:before {
  content: '';
  display: block;
  width: 100%;
  height: 150px;
  left: -100%;
  bottom: 0;
  position: absolute;
  background: linear-gradient(transparent, white);
  pointer-events: none
}

<div class="row">
  <div class="content">content</div>
  <div class="background"></div>
</div>

JSFiddle

【讨论】：

【解决方案11】：

您需要将包含外部的<div> 设置为position: realtive;，例如<p>Some text to be faded in here</p> 和position: absolute; top: 0; left: 0;。您还需要在外部<div> 内并与<p> 处于同一级别的另一个<div>，也需要设置position: absolute; top: 0; left: 0;，并设置与您希望淡入淡出的区域相匹配的高度和宽度。这也应该有z-index: 10; background-image: linear-gradient(transparent, rgba(255,255,255,1));。这消除了对 webkit 选项的需要。

【讨论】：