如何使用jQuery计算样式为“ nowrap”的文本宽度？

Question

我正在尝试为我的最新新闻栏目的字幕效果，问题是我无法计算UL标签内的文本宽度，因此无法找到解决方案

 (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({ speedPixelsInOneSecound: 70, select: $('#latestNews ul'), clickSelect: $('.message'), clickUrl: 'services.php' }); 

 #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> 

我试图在此部分编写字幕功能，但问题是我无法为每个新闻或整个UL（短消息的容器）设置固定宽度

所以我需要以某种方式找出UL内部的文本宽度

谢谢

Answer 1

要获得不带换行符的文本宽度，可以将文本添加到temp span容器中，span容器将被隐藏，将文本添加到span容器并使用span查找。

HTML

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

CSS

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

JS

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

希望您对解决方案有所了解。