javascript - 如何使用 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

要获得没有换行的文本宽度，您可以将文本添加到临时跨度容器，跨度容器将被隐藏，将文本添加到跨度容器并找到跨度。

html

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

CSS

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

JS

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

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