web-dev-qa-db-fra.com

Suppression du texte en cas de débordement avec css si le texte est plus gros que celui autorisé

J'essaie de créer un effet de fondu lorsque la quantité de texte est supérieure à la taille de la ligne. Je réalise cela avec le mélange de max-height, overflow et linear-gradient. Quelque chose comme ça.

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

Le le violon complet est disponible . J'essaie d'obtenir un effet similaire à celui-ci enter image description here

et je suis un peu proche. Le problème est que, dans mon cas, le texte commence à disparaître du début à la fin, et je veux que le fondu disparaisse seulement s'il est vraiment proche de la taille maximale. Disons commencer à disparaître s'il est déjà 150px. De plus, je n'utilise que -webkit préfixe et je suppose qu’il peut y avoir d’autres préfixes que je peux ajouter pour d’autres moteurs de rendu.

Y a-t-il un moyen de faire cela en CSS pur?

htmlcsshtml5css3
62
Salvador Dali

Il semble que votre exigence consiste simplement à supprimer le texte commençant en fondu à une certaine hauteur (environ 150 pixels), le texte (le cas échéant) présenté à cette hauteur est considéré comme un dépassement de capacité. Pour que vous puissiez utiliser une sorte de couche de dégradé linéaire transparent placée au-dessus de la zone de texte, nous pouvons le faire de manière nette en utilisant le pseudo- élément :before comme ça:

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

violon

96
King King

Je suggérerais quelque chose comme ça:

Appliquez le dégradé à un pseudo-élément positionné de manière absolue (:after), Qui se positionne à 160px du haut avec une hauteur de 40px - ainsi, il ne sera pas affiché du tout dans des cases plus courtes (en raison de leur max-height En combinaison avec overflow:hidden). Et le dégradé lui-même va de totalement transparent (rgba(0,0,0,0)) au noir uni.

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

9
CBroe

Je pense que vous cherchez quelque chose comme ça, non?

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

Votre code est correct, il suffit de définir le pourcentage de doublure

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

Essayez le lien de violon

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

Vous pourriez aussi le spécifier en pixel comme ceci

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

Les deux fonctionnent de la même manière

2
ShinyJos

Je vous recommande d'utiliser http://www.colorzilla.com/gradient-editor/ .

Ce que vous recherchez peut être:

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

et, si vous ne le souhaitez pas, copiez et collez ces css dans l’url (fenêtre css) et modifiez-les à volonté.

2
Alvaro Menéndez

Si vous n’avez pas besoin de vous fier aux pourcentages, utilisez box-shadow au lieu de background-image. Il permet à l'utilisateur d'interagir avec les éléments situés derrière votre fondu, sans avoir besoin de pointer-events: none ( http://caniuse.com/#feat=pointer-events ):

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

Mais attention, box-shadow peut ralentir le défilement:

1
yckart

J'ai utilisé cette méthode pour rendre le fond transparent.

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>
0
Arun Prasad E S

J'ai eu un problème similaire avec un bouton bootstrap) qui a un dégradé vertical et également un changement de dégradé en survol. Cela a fonctionné pour moi.

<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

0
Andy Gee