div 요소에서 텍스트의 마지막 문자를 제거하는 방법

Question

텍스트를 입력하는 div를 하나 만듭니다. jQuery와 함께이 div의 텍스트 너비를 계산하고 싶습니다. 부모 요소가 더 큰 텍스트의 너비가 마지막 문자를 제거하고 텍스트의 새로운 너비 (마지막 문자 없음)를 확인하고 부모 요소의 너비와 비교하여이 작업을 계속합니다 (마지막 문자 제거 및 너비 검사). 부모 요소의 작은 마지막 텍스트

에서 "..."넣을 경우이 내 코드 나를 인도하십시오 http://jsfiddle.net/bw25w/

<div id="text-messege"> 
    <div>my name is mamal and I'm so alone....ohhhh my god help me!!! :(I love you guys.you are so good</div> 
</div> 

Answer 1

이 코드를 작성하고 그것을 작동 : 당신은 스팬 DIV, 또는 장소 CSS를 변경할 수 있습니다 D 롤 그냥 텍스트를 깨고 추가하지 사업부를 설정하지 왜

$(function(){ 
    var widparent = ($('#text-messege').width())*1.5; 
    var matn1 = $('#mamal').text(); 
    var spantest1 = '<span class="msg">' + matn1 + '</span>'; 
    $('body').append(spantest1); 
    var widtext = $('body .msg').width(); 
    $('body .msg').remove(); 

    if(widtext > widparent){ 
     var spanstr = null; 
     var widstr = null; 
     do{ 
      var str = matn1.substring(0, matn1.length-1); 
      spanstr = '<span class="str">' + str + '</span>'; 
      $('body').append(spanstr); 
      var widstr = $('body .str').width(); 
      var valuestr = $('body .str').text(); 
      $('body .str').remove(); 
      matn1 = valuestr; 
      //console.log(matn1); 
      console.log(widstr,widparent); 

     }while(widstr >= widparent); 

     console.log(matn1); 
     $('#mamal').text(matn1+'......'); 
    } 



}); 

Answer 2

스플 라이스 1 개 기호를 컨테이너가 키 (또는 넓은) 될 때까지

var $container = $("#text-messege") 
var $block = $container.find("div"); 
while($block.height()>$container.height()){ 
    $block.text($block.text().splice(-1)) 
} 

while($block.width()>$container.width()) 

당신 폭을 확인해야하는 경우

에

http://jsfiddle.net/QMZUK/

변경주기. 또한 CSS에주의하십시오. 부모와 자녀의 크기를 비교해야하는 경우 크기가 같지 않아야합니다 (!!!). http://www.w3schools.com/cssref/css3_pr_text-overflow.asp 는, 텍스트 자식 노드는 INLINE해야 CSS 솔루션을 적용하려면; GL 어쨌든

, 나는 여기 읽어

text-overflow:ellipsis; 

같은 CSS 솔루션을 사용하여 선호하는 것

display:inline;