jquery로 말줄임 기능 만들기

위와 같이 일정 글자수가 넘어가면 '...' 처리를 하려고 했다.

 

처음에는 css line-clamp ,ellipsis로 처리하려고 했는데 크로스브라우징에 문제가 생겨서 ㅜㅜ

 

크롬에서는 잘되는데 ie에서 안되는 관계로 결국에는 스크립트로 진행했다.

 

-javascript

<script>
  $('.line-clamp').each(function(){
    var lentgh = 80; //글자수
    $(this).each(function(){
      if($(this).text().length >= length){
        $(this).text($(this).text().substr(0,length)+'...');
      }
    });
  });
</script>

-html

<div class='line-clamp'>
이 편지는 영국에서 최초로 시작되어 일년에 한 바퀴 돌면서 받는 사람에게 행운을 주었고 지금은 당신에게로 옮겨진 
이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을 행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 
</div>

출처 : https://cccat.tistory.com/32