멀티 라인 텍스트 오버 플로우 : CSS 나 JS에서 줄임표, IMG 태그

Question

나는 사용하여 시도 :

• 텍스트 오버 플로우 생략 기능을 CSS3에 (그러나 멀티 라인을 지원하지 않습니다)
• 몇 가지를 dotdotdot (http://dotdotdot.frebsite.nl/)와 같은 jquery 플러그인
• jquery 자동 줄 바꿈 (http://pvdspek.github.com/jquery.autoellipsis/).

이러한 도구는 모두 훌륭하게 작동하지만 이미지에 이미지가있는 경우 dotdotdot 또는 jquery.autoellipsis를 사용하여 잘라낸 높이를 잘못 계산했습니다.

전 누군가가이 문제 (서버 측 처리 중일 수 있습니다)를 처리하는 데 훌륭한 아이디어가 있는지 궁금한 점이 있습니다. 사전 감사 :-).

Answer 1

다중 줄 div의 고정 높이를 설정 한 다음 img과 줄임표를 절대적으로 배치하여 스크립트를 단순화하여 사용자의 생략 부호 위치 지정 오프셋을 사용하십시오. 오른쪽 간격 띄우기는 font-size과 각 문장의 특정 글자의 커닝에만 적용되므로 고정 폭 글꼴을 사용하지 않으면 시행 착오가 필요합니다. 기본 구조는 다음과 같이이다 :

<style type="text/css"> 
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; } 
.lineup { top: 6px; } 
.monalisa { position: absolute; top: 2px; left: -18px; } 
.wrapper { position: relative; width: 360px } 
.textblob { width: 330px; height: 30px; } 
</style> 
<!--...--> 
<div class="wrapper"> 
    <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/> 
    <div class="textblob"> 
    <span class="truncate">…</span> 
    <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span> 
    </div> 
</div> 

Answer 2

당신이 (@의 C69 설명처럼 오페라와 웹킷에 대한뿐만 아니라) X-브라우저 지원이 필요합니다.

더 멋진 방법을 발견했습니다. 그러나 수동으로 조정할 수도 있습니다.

jsfiddle의 작동 예제를 살펴보십시오.

HTML

<p> 
    Lorem ipsum dolor sit amet, consectetur 
</p> 

CSS

p { 
    height: 3.7em; 
    position: relative; 
    overflow: hidden; 
    width: 235px; 
} 

p:after{ 
    /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */ 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); 
    /* for IE9,IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1); 
    bottom: 0; 
    content: "..."; 
    float:right; 
    padding-left: 10px; 
    position: absolute; 
    right: 0; 
} 

출처 :
1 mobify
2 css-tricks