요소의 크기 및 슬라이스 제목 크기 조정

Question

내 사이트에 제목이있는 div 요소가 몇 개 있습니다. 창의 크기를 조정할 때 제목이 새 줄로 나올 수 있습니다.

나는 그것을 피하고 싶습니다. 그러나 제가 다루는 문제는 제목을 잘라내어 짧은 제목을 태그에 입력 할 때 예상대로 작동한다는 것입니다. 이제 창을 큰 요소로 크기를 조정하면 짧은 제목이 표시됩니다. 기본적으로 앞뒤로 전환 할 수 있습니까?

이것은 현재 각 제목의 길이를 검사하는 코드이며 27자를 초과하면자를 것입니다. 다음과 같이 코드는 다음과 같습니다

이

new ResizeSensor($('#col1'), function(){ 
    if($('#col1').width() >= 330) { 
     $('.stats').show(); 

     // how could I check here if the title was sliced and then unslice it?    

    } 
    else { 
     var titles = []; 
     var lengths = []; 

     $('.title-header').each(function() { 
      var title = $(this).text(); 
      var length = $(this).text().length; 

      titles.push(title); 
      lengths.push(length); 
     }); 

     for (var x = 0, len = titles.length; x < len; x++) { 
      if (lengths[x] > 27) { 
       var newTitle = titles[x].slice(0, -9); 
       var oldTitle = $("#col" + x).find(".title-header").text(); 

       $("#col"+x).find(".title-header").text(newTitle + "..."); 
      } 
     } 

     $('.stats').hide(); 
    } 
}); 

내가 로컬 스토리지를 사용하여 제목을 저장하고 요소 크기를 조정할 때 그 때마다 사용할 수있는 알고있다. 그러나 내가 생각하지도 모르는 쉬운 방법이 있는지 궁금합니다. 어떤 도움을 주셔서 감사합니다. 나는 내 머리를 할

Answer 1

아주 간단한 대답은 훨씬 이전에, 많은 보았다 : 앞뒤로 크기 조절시

그냥 실제로 크기를 조정하기 전에 배열을 저장하는 데 필요한

var titles = []; 
var lengths = []; 

$('.title-header').each(function() { 
    var title = $(this).text(); 
    var length = $(this).text().length; 

    console.log('title is '+title); 
    titles.push(title); 
    lengths.push(length); 
}); 

new ResizeSensor($('#col1'), function(){ 
    if($('#col1').width() >= 330) { 
     for (var x = 0, len = titles.length; x < len; x++) { 
      if (lengths[x] <= 33) { 
       var newTitle = titles[x]; 

       $("#col"+x).find(".title-header").text(newTitle); 
      } 
     } 

     $('.stats').show(); 
    } 
    else { 
     for (var x = 0, len = titles.length; x < len; x++) { 
      if (lengths[x] > 27) { 
       var newTitle = titles[x].slice(0, -9); 

       $("#col"+x).find(".title-header").text(newTitle + "..."); 
      } 
     } 

     $('.stats').hide(); 
    } 
}); 

는 그래서 그들은 사용할 수 있습니다.