0

文字数をインクリメントしてdivの幅を計算するために、このそれほど優れていないJavaScriptを作成しました。

  $(".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の幅を文字数に正確かつ比例して計算する方法はありますか？

ありがとう！

4

2 に答える 2

3

これを試して：

$( '.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-03T17:03:40.303 に答える
0

コードで直面している問題の1つは、すべてのifブロックが評価されることです。また、テキストの長さが指定された下限と上限の間にあるかどうかを評価するのではなく、テキストの長さが指定された数値よりも大きいかどうかを評価するだけです。

if特定の条件がuse if/と一致した後、sの評価が停止することを確認しelse if、長さが下限と上限の範囲内にあるかどうかを評価するために、2番目の条件をテストしました。

$('.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");
        }
    });​

JSFiddleデモを更新しました。

于 2012-07-03T17:03:29.123 に答える