jquery로 "nowrap"스타일의 텍스트 너비를 계산하는 방법은 무엇입니까?

Question

임 내 최신 뉴스 섹션 에 대한 윤곽 효과를 작성하려고 문제는 내가이

(function($){ 
 
     $.fn.marque = function(options, callback){ 
 
     var defOptions = $.extend({ 
 
       speedPixelsInOneSecound: 150, 
 
       select: $('#latestNews'), 
 
       clickSelect: '', 
 
       clickUrl: '' 
 
     }, options); 
 

 
     var windowWidth = $(window).width(); 
 
     var textWidth = defOptions.select.outerWidth(); 
 
     var duration = (windowWidth + textWidth) * 1000/
 
     defOptions.speedPixelsInOneSecound; 
 
     var startingPosition = (windowWidth + textWidth); 
 
     var curentPosition = (windowWidth + textWidth); 
 
     var speedProportionToLocation = curentPosition/startingPosition; 
 
     defOptions.select.css({'left': -(textWidth)}); 
 
     defOptions.select.show(); 
 
     var animation; 
 

 
     function marquee(animation){ 
 
      curentPosition = (windowWidth + defOptions.select.outerWidth()); 
 
      speedProportionToLocation = curentPosition/startingPosition; 
 
      animation = defOptions.select.animate({'left': windowWidth+'px'}, 
 
      duration * speedProportionToLocation, "linear", function(){ 
 
      defOptions.select.css({'left': -(textWidth)}); 
 
     }); 
 
    } 
 
     var play = setInterval(marquee, 200); 
 
     return this; 
 
    }; 
 
}(jQuery)); 
 

 
$(window).marque({ 
 
\t  speedPixelsInOneSecound: 70, 
 
\t  select: $('#latestNews ul'), 
 
\t  clickSelect: $('.message'), 
 
\t  clickUrl: 'services.php' 
 
\t });

#latestNews > * { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
#latestNews h1 { 
 
    width: 22.175%; 
 
    height: 42px; 
 
    font: 16px/42px 'IranYekanWebRegular'; 
 
    background-color: #1e93c4; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
#latestNews > div { 
 
    width: 76.825%; 
 
    padding: 0 20px; 
 
    height: 42px; 
 
    background-color: #f5f5f5; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#latestNews > div:after, #latestNews > div:before { 
 
    content: ""; 
 
    display: block; 
 
    background-color: #f5f5f5; 
 
    width: 20px; 
 
    height: 42px; 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 

 
#latestNews > div:after { 
 
    left: 0; 
 
} 
 

 
#latestNews > div:before { 
 
    right: 0; 
 
} 
 

 
#latestNews ul { 
 
    white-space: nowrap; 
 
    position: relative; 
 
} 
 

 
#latestNews li { 
 
    display: inline-block; 
 
    margin-right: 40px; 
 
} 
 

 
#latestNews li:first-child { 
 
    margin-right: 0; 
 
} 
 

 
#latestNews a { 
 
    display: block; 
 
    height: 42px; 
 
    font: 12px/42px 'IranYekanWebRegular'; 
 
    color: #777; 
 
} 
 

 
#latestNews a span:first-child { 
 
    font: 12px 'IranYekanWebBold' ; 
 
    margin-left: 10px; 
 
    color: #1e93c4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="latestNews"> 
 
    <h1>Latest News</h1> 
 
    <div> 
 
     <ul> 
 
      <li><a href="#"> 
 
       <span class="latestNewsTitle aqua">Title 1</span><span class="newsDescription">Sample Text 1 Sample Text 1 </span> 
 
      </a></li> 
 
      <li><a href="#"> 
 
       <span class="latestNewsTitle aqua">Title 2</span><span class="newsDescription">Sample Text 2 Sample Text 2 </span> 
 
      </a></li> 
 
      <li><a href="#"> 
 
       <span class="latestNewsTitle aqua">Title 3</span><span class="newsDescription">Sample Text 3 Sample Text 3 </span> 
 
      </a></li> 
 
      <li><a href="#"> 
 
       <span class="latestNewsTitle aqua">Title 4</span><span class="newsDescription">Sample Text 4 Sample Text 4 </span> 
 
      </a></li> 
 
     </ul> 
 
    </div> 
 
</div>

임에 대한 해결책을 찾기 couldnt는 내 UL 태그 내부의 텍스트 폭을 계산하지 못할 것입니다 이 섹션에 연회실 기능을 쓰려고하지만 문제는 각 뉴스 또는 전체 UL (짧은 뉴스의 컨테이너)에 고정 된 너비를 설정할 수 없다는 것입니다.

그래서 텍스트 너비 i를 알아 내야합니다. 당신이 온도 범위 컨테이너에 텍스트를 추가 할 수없는 랩 텍스트 너비를 얻기 위해 UL에게 어떻게 든

감사

Answer 1

을 nside, 스팬 컨테이너가 숨겨집니다, 컨테이너에 걸쳐 및 스팬의에 찾을 텍스트를 추가합니다.

HTML

<span id="tempContainer"></span> 

CSS

#tempContainer{ 
     overflow: hidden; 
     white-space: nowrap; 
     display: none; 
} 

JS

var singleNewsDiscriptionWidth = $('#tempContainer').text($('.newsDescription').first().text()).width() 

당신이 솔루션에 대한 몇 가지 아이디어를 얻을 바랍니다.