[jquery] 리사이징시 글자수에 따른 말줄임 처리

최근 작업중인건데,

브라우저를 리사이징할 때마다 말줄임 처리되는 글자수를 변경시키고 싶었다.

// min-width:769px 에서는
가나다라마바사아자차카타파하가나다라마바... 더보기

//max-width:768px 에서는
가나다라마사아자차카... 더보기

이렇게 사이즈에 따라 글자수가 줄어들고 느는 걸 만들고 싶었음.

​

머리를 쥐어짜고 구글써치도 어마어마하게 뒤져서 만들었다.

<div>
  <p>
    가나다라마사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
  </p>
</div>

var length;
var text = $('div p').text();

function lengthChange(){
  if($(window).width() > 768){
    length = 20;
  }else {
    length = 10;
  }
}
function shortening(){
  if($('div p').text().length >= length){
    $('div p').text($('div p').text().substr(0, length) + "... 더보기");
  }
}
lengthChange();
shortening();

$(window).resize(function(){
  lengthChange();
  $('div p').text(text);
  shortening();
})

일단 이건 해결했다.

근데 div 가 여러개일경우 각 div의 p 값을 .each() 안에서 $(this)로 돌렸는데,

text = $(this).text(); 로 돌렸을때 마지막 div p의 텍스트값이 text에 저장되어

모든 p의 텍스트가 마지막 p의 텍스트 값으로 남음 ㅜ0ㅜ

이건 좀 더 머리를 굴려봐야겠다. 어떻게 하면 되려나 .. 바보는 오늘도 고민을 한다..!