# CSS 말줄임

 

한줄말줄임 

.one_line { width:300px; outline:1px solid red; 
    text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden;
}

 

<div class="one_line">

현지에서도 류현진의 꾸준함을 부각하는 평가가 꾸준하게 나오고 있다. 미국의 전국단위 언론인 CBS는 9일 내셔널리그 신인왕 판도를 분석하는 글에서 류현진을 후보군에 포함시켰다. 선정 이유도 구체적이었다. CBS는 “클레이튼 커쇼가 다저스의 에이스임은 명백하지만 류현진도 안정 장치(stabilizer) 몫을 했다. 다저스의 선발 로테이션이 부상으로 고전할 때 류현진은 꾸준히 자신의 차례를 지켰다”라고 평가했다.

</div>

 

 

열러줄 말줄임 (웹킷 기반 브라우저만 적용)

 .multi_line {  width:300px; outline:1px solid red;
     display: -webkit-box;  overflow : hidden; text-overflow: ellipsis; 
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;    
}

 

<div class=" multi_line" >
현지에서도 류현진의 꾸준함을 부각하는 평가가 꾸준하게 나오고 있다. 미국의 전국단위 언론인 CBS는 9일 내셔널리그 신인왕 판도를 분석하는 글에서 류현진을 후보군에 포함시켰다. 선정 이유도 구체적이었다. CBS는 “클레이튼 커쇼가 다저스의 에이스임은 명백하지만 류현진도 안정 장치(stabilizer) 몫을 했다. 다저스의 선발 로테이션이 부상으로 고전할 때 류현진은 꾸준히 자신의 차례를 지켰다”라고 평가했다.

</div>

 

 

text-overflow: EVENT 활용

한줄말줄임 

  $('.one_line').on("mouseover", function(e){
    if (e.target.clientWidth >= e.target.scrollWidth) {
   	 // 말줄임 생기지 않을때.
    }else{
   	 // 말줄임 생길때.
    }
  });

 

열러줄 말줄임

$('.multi_line').on("mouseover", function(e){
  if (e.target.clientHeight >= e.target.scrollHeight) {
  	// 말줄임 생기지 않을때.
  }else{
 	// 말줄임 생길때.
  }
});

 

# 말줄임 플러그인 : http://dotdotdot.frebsite.nl/

# download : 

dotdotdot-1.6.5.zip

다운로드