텍스트가 허용 된 것보다 큰 경우 CSS로 오버플로시 텍스트 페이드 아웃

텍스트가 허용 된 것보다 큰 경우 CSS로 오버플로시 텍스트 페이드 아웃

---

텍스트의 양이 행이 처리 할 수있는 것보다 클 때 텍스트 페이드 아웃 효과를 만들려고합니다. max-height, overflow및을 혼합하여이를 달성 하고 linear-gradient있습니다. 이 같은.

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

전체 바이올린을 사용할 수 있습니다 . 이것과 비슷한 효과를 얻으려고 노력하고 있습니다

그리고 나는 약간 가깝습니다. 문제는 내 경우 텍스트가 처음부터 페이드 아웃되기 시작하고 실제로 최대 크기에 가까운 경우에만 페이드 아웃되기를 원한다는 것입니다. 이미 150px이면 페이드 아웃을 시작한다고 가정 해 보겠습니다. 또한 -webkit접두사 만 사용하고 있으며 다른 렌더링 엔진에 추가 할 수있는 다른 접두사가있을 수 있다고 가정합니다.

순수 CSS에서이 작업을 수행하는 방법이 있습니까?

---

귀하의 요구 사항은 특정 높이 (약 150px)에서 시작하는 텍스트를 페이드 아웃하는 것 같습니다. 해당 높이에 표시되는 텍스트 (있는 경우)는 오버플로로 간주됩니다. 따라서 텍스트 영역 위에 배치 된 일종의 투명한 선형 그래디언트 레이어를 사용해 볼 수 있습니다 :before. 다음과 같은 의사 요소를 사용하여 깔끔하게이 작업을 수행 할 수 있습니다 .

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

깡깡이

---

다음과 같은 것을 제안합니다.

그래디언트를 절대 위치에있는 가상 요소 ( :after)에 적용합니다. 즉, 위쪽에서 160 픽셀, 높이 40 픽셀에 위치합니다. 이렇게하면 더 짧은 상자에 전혀 표시되지 않습니다 ( 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/

---

나는 당신이 이와 같은 것을 찾고 있다고 생각합니다.

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

---

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 창)에 복사하여 붙여넣고 마음대로 수정합니다.

---

코드가 정확합니다. 라이너 그래디언트 비율을 설정해야합니다.

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

바이올린 링크 시도

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

다음과 같이 픽셀로 지정할 수 있습니다.

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

둘 다 동일하게 작동합니다.

---

백분율 값에 의존 할 필요가 없으면 box-shadow대신을 사용하십시오 background-image. 사용자가 pointer-events: none( http://caniuse.com/#feat=pointer-events ) 필요없이 페이딩이면의 요소와 상호 작용할 수 있습니다 .

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

그러나 상자 그림자는 스크롤 속도를 늦출 수 있습니다.

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

---

수직 그래디언트가 있고 마우스 오버시 그래디언트가 변경되는 부트 스트랩 버튼과 비슷한 문제가 있습니다. 이것은 나를 위해 일했습니다.

<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

---

이 방법을 사용하여 바닥을 투명하게 만들었습니다.

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>

참고 URL : https://stackoverflow.com/questions/22808040/fading-out-text-on-overflow-with-css-if-the-text-is-bigger-than-allowed