Как рассчитать ширину текста в стиле "nowrap" с помощью jquery?

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

Чтобы получить ширину текста без переноса, вы можете добавить свой текст в временный контейнер 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()

Надеюсь, у вас есть идея для вашего решения.