jquery를 사용하는 줄임표 텍스트 만 가져 오기

Question

좋은 코드입니다. 줄임표 텍스트를 쿼리하고 가져올 수 있는지 궁금합니다. 즉, 원본 텍스트가 아닌 점으로 표시됩니다. 나는 텍스트

를 추가하는 경우

이이 긴 센있다가

로 단축됩니다 긴 문장

과 (생략에 대한 관련 CSS를 사용)입니다 ...

xt

"This is a long sen ..." 

$("p") 원본 개체가 아닌 DOM 개체?

Answer 1

l에는 브라우저 별 조정이 필요합니다.

자바 스크립트 :

jQuery.fn.getShowingText = function() { 
    // Add temporary element for measuring character widths 
    $('body').append('<div id="Test" style="padding:0;border:0;height:auto;width:auto;position:absolute;display:none;"></div>'); 
    var longString = $(this).text(); 
    var eleWidth = $(this).innerWidth(); 
    var totalWidth = 0; 
    var totalString = ''; 
    var finished = false; 
    var ellipWidth = $('#Test').html('&hellip;').innerWidth(); 
    var offset = 7; // seems to differ based on browser (6 for Chrome and 7 for Firefox?) 
    for (var i = 0; 
    (i < longString.length) && ((totalWidth) < (eleWidth-offset)); i++) { 
     $('#Test').text(longString.charAt(i)); 
     totalWidth += $('#Test').innerWidth(); 
     totalString += longString.charAt(i); 
     if(i+1 === longString.length) 
     { 
      finished = true; 
     } 
    } 
    $('body').remove('#Test'); // Clean up temporary element 
    if(finished === false) 
    { 
     return totalString.substring(0,totalString.length-3)+"…"; 
    } 
    else 
    { 
     return longString; 
    } 
} 
console.log($('#ellDiv').getShowingText()); 

CSS : 누군가가 원인을 파악 할 수있는 경우를 제외하고는 offset 요구, 브라우저에 따라 변경할 수 있다는 경고와

#Test { 
    padding:0; 
    border:0; 
    height: auto; 
    width: auto; 
    position:absolute; 
    white-space: pre; 
} 
div { 
    width: 100px; 
    white-space: nowrap; 
    border: 1px solid #000; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    padding:0; 
} 

.

나는 letter-spacing 또는 이와 동등한 것으로 의심됩니다.