Ausblenden von Text beim Überlaufen mit CSS, wenn der Text größer als zulässig ist

Ich versuche, einen Textausblendeffekt zu erzeugen, wenn die Textmenge größer ist, als die Zeile verarbeiten kann. Ich Erreichung dieses Ziels mit der Mischung aus max-height, overflowund linear-gradient. Etwas wie das.

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

Die volle Geige ist verfügbar . Ich versuche einen ähnlichen Effekt zu erzielen

und ich bin irgendwie nah. Das Problem ist, dass in meinem Fall der Text von Anfang an ausgeblendet wird und ich möchte, dass er nur dann ausgeblendet wird, wenn er wirklich nahe an der maximalen Größe liegt. Nehmen wir an, Sie beginnen mit dem Ausblenden, wenn es bereits 150 Pixel groß ist. Außerdem verwende ich nur -webkitPräfixe und gehe davon aus, dass es möglicherweise andere Präfixe gibt, die ich für andere Rendering-Engines hinzufügen kann.

Gibt es eine Möglichkeit, dies in reinem CSS zu tun?

Es sieht so aus, als ob Sie lediglich den Text ab einer bestimmten Höhe (ca. 150 Pixel) ausblenden müssen. Der Text (falls vorhanden), der in dieser Höhe angezeigt wird, wird als Überlauf betrachtet. Sie können also versuchen, eine transparente lineare Verlaufsebene über dem Textbereich zu verwenden. Mit dem folgenden Pseudoelement können wir dies auf saubere Weise erreichen :before:

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

Geige

Ich würde so etwas vorschlagen:

Wenden Sie den Farbverlauf auf ein absolut positioniertes :afterPseudoelement ( ) an, das mit einer Höhe von 40 Pixel bei etwa 160 Pixel von oben positioniert wird. Auf diese Weise wird es in kürzeren Feldern (aufgrund der max-heightKombination mit overflow:hidden) überhaupt nicht angezeigt . Und der Farbverlauf selbst reicht von vollständig transparent ( rgba(0,0,0,0)) bis fest schwarz.

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

Ich denke du suchst so etwas, oder?

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

Ihr Code ist korrekt, nur der prozentuale Gradient des Liners muss eingestellt werden

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

Probieren Sie den Geigenlink aus

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

Sie können es auch in Pixel wie diesem angeben

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

Beides funktioniert gleich

Wenn Sie sich nicht auf Prozentwerte verlassen müssen, verwenden Sie box-shadowstattdessen background-image. Es ermöglicht dem Benutzer, mit den Elementen hinter Ihrem Fading-Ding zu interagieren, ohne dass dies erforderlich ist pointer-events: none( http://caniuse.com/#feat=pointer-events ):

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

Aber seien Sie gewarnt, Box-Shadow kann das Scrollen verlangsamen:

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

Ich empfehle Ihnen, http://www.colorzilla.com/gradient-editor/ zu verwenden .

Was Sie suchen, kann sein:

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 */

und wenn Sie nicht wie gewünscht arbeiten, kopieren Sie diese CSS, fügen Sie sie in die URL (CSS-Fenster) ein und ändern Sie sie nach Belieben.

Ich hatte ein ähnliches Problem mit einer Bootstrap-Schaltfläche, die einen vertikalen Verlauf und auch eine Änderung des Verlaufs beim Schweben aufweist. Das hat bei mir funktioniert.

<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

Ich habe diese Methode verwendet, um den Boden transparent zu machen.

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>