Рассчитать ширину div пропорционально тексту внутри внутри jquery?

Я построил этот не очень большой кусок javascript для вычисления ширины div на основе количества символов с шагом.Рассчитать ширину div пропорционально тексту внутри внутри jquery?

$(".tweet-text").each(function() { 
    var tweetText = $(this); 
    if(tweetText.text().length > 30) { 
     tweetText.css("width", "200px"); 
    } 
    if(tweetText.text().length > 60) { 
     tweetText.css("width", "240px"); 
    } 
    if(tweetText.text().length > 80) { 
     tweetText.css("width", "280px"); 
    } 
    if(tweetText.text().length > 100) { 
     tweetText.css("width", "310px"); 
    } 
    if(tweetText.text().length > 120) { 
     tweetText.css("width", "360px"); 
    } 
    if(tweetText.text().length > 130) { 
     tweetText.css("width", "400px"); 
    } 
    });

Есть ли способ, чтобы вычислить ширину tweetText точно и пропорционально количеству символов?

Спасибо!

источник

2012-07-03 William Hutter

Почему бы не просто авто ширину? – jeschafe

, потому что они сложены в карусели, и необходима ширина –

Попробуйте это:

$('.tweet-text').each(function() { 
    var $span = $(this).wrapInner('<span>').children('span'); 
    $(this).css('width', $span.width()); 
    $span.replaceWith($span.contents()); 
});

Живая демонстрация:http://jsfiddle.net/N8xNM/2/

(В моем демо, каждый абзац до тех пор, как он должен быть, или, другими словами, до тех пор, как его текст содержание.)

Также, установите white-space: nowrap в CSS на .tweet-text элементов.

.tweet-text { 
    white-space: nowrap; 
}

источник

2012-07-03 17:03:40

Это гораздо более приятный подход, чем мой собственный; Я рассматривал нечто подобное (хотя, возможно, и менее эффективно), но сделал предположение, что требуемые приращения были необходимы. +1 –

@DavidThomas Я предположил, что текст, скорее всего, * не * моноширинный, что означает, что требуемая ширина не может быть надежно определена на основе количества букв. Поэтому я должен был определить фактическую ширину текста, и, как я думал, я мог бы просто установить ширину контейнера для этого значения. –

Одна из проблем, с которыми вы сталкиваетесь в своем коде, заключается в том, что каждый блок if будет оценен; и вы только когда-либо оцениваете, превышает ли длина текста заданное число, а не оценивает, находится ли длина между заданным нижним и верхним пределом.

Для того, чтобы гарантировать, что if с остановкой оценивается после того, как заданное условие совпадение использовать if/else if, а также оценить, попадет ли длина в пределах нижних и верхних пределов, я проверил для второго состояния.

$('.tweet-text').each(
    function() { 
     var tweetText = $(this), 
      strLength = tweetText.text().length; 
     if (strLength > 30 && strLength < 60) { 
      tweetText.css("width", "200px"); 
     } 
     else if (strLength >= 60 && strLength < 80) { 
      tweetText.css("width", "240px"); 
     } 
     else if (strLength >= 80 && strLength < 100) { 
      tweetText.css("width", "280px"); 
     } 
     else if (strLength >= 100 && strLength < 120) { 
      tweetText.css("width", "310px"); 
     } 
     else if (strLength >= 120 && strLength < 130) { 
      tweetText.css("width", "360px"); 
     } 
     else if (strLength >= 130) { 
      tweetText.css("width", "400px"); 
     } 
    });

Updated JS Fiddle demo.

источник

2012-07-03 17:03:29

Рассчитать ширину div пропорционально тексту внутри внутри jquery?

ответ

Смежные вопросы