如果文本大于允许的话，使用css淡出溢出的文本

时间：2014-04-02 10:07:02

标签： html css html5 css3

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

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

full fiddle is available。我正在尝试实现与此enter image description here

类似的效果

我很亲密。问题是，在我的情况下，文本从一开始就淡出，我希望它只有在真正接近最大尺寸时才开始淡出。让我们说如果它已经是150px就开始淡出。此外，我只使用-webkit前缀，我假设可能有其他前缀可以添加到其他渲染引擎。

有没有办法在纯CSS中执行此操作？

10 个答案:

答案 0 :(得分：91)

看起来你的要求只是淡化从某个高度（大约150px）开始的文本，在那个高度呈现的文本（如果有的话）被认为是溢出。因此，您可以尝试使用放置在文本区域顶部的某种透明线性渐变图层，我们可以使用伪元素:before以一种巧妙的方式实现此目的：

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

Fiddle

答案 1 :(得分：9)

我建议这样的事情：

将渐变应用于绝对定位的伪元素（:after），从顶部以40px高度定位为160px - 这样，它就不会在较短的框中显示（因为他们的max-height与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/

答案 2 :(得分：5)

我使用了这个源自 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>

答案 3 :(得分：3)

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

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

答案 4 :(得分：2)

我建议您使用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复制并粘贴到网址（css窗口）中并随意修改。

答案 5 :(得分：2)

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

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

尝试小提琴链接

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

你也可以用像这样的像素来指定它

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

两者的作用相同

答案 6 :(得分：1)

如果您不需要依赖百分比值，请使用box-shadow代替background-image。这样就可以让用户与褪色事物背后的元素进行互动，而无需pointer-events: none（http://caniuse.com/#feat=pointer-events）：

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

但要注意，box-shadow可以减慢滚动速度：

答案 7 :(得分：0)

我使用这种方法使底部透明。

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>

答案 8 :(得分：0)

我对自举按钮有类似的问题，该按钮具有垂直渐变，并且在悬停时也会改变渐变。这对我有用。

<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

答案 9 :(得分：0)

我的渐变出现溢出的变体

.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

相关问题
最新问题