Затухание текста при переполнении с помощью css, если текст больше допустимого

Ответ 1

Похоже, ваше требование просто для того, чтобы потушить текст, начинающийся с определенной высоты (около 150 пикселей), текст (если есть), представленный на этой высоте, считается переполнением. Таким образом, вы можете попробовать использовать какой-то прозрачный линейный градиентный слой, расположенный поверх текстовой области, мы можем добиться этого аккуратным способом, используя псевдоэлемент :before следующим образом:

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

Fiddle

Ответ 2

Id предлагает что-то вроде этого:

Примените градиент к абсолютно позиционированному псевдоэлементу (:after), который позиционируется в 160px сверху с высотой 40px - таким образом, он не будет отображаться вообще в более коротких ячейках (из-за их 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/

Ответ 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

Я рекомендую вам использовать 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-окно) и измените его по своему усмотрению.

Ответ 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. Это позволяет пользователю взаимодействовать с элементами замирания, без необходимости 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://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

У меня была похожая проблема с кнопкой начальной загрузки, которая имеет вертикальный градиент, а также изменение градиента при наведении. Это сработало для меня.

<button class="btn btn-success" style="width:250px">
      <div class="faderflow">
         SOME TEXT THAT 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