0

我已经构建了这段不那么棒的 javascript 来根据增量的字符数计算 div 的宽度。

  $(".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: nowrapCSS 。.tweet-text

.tweet-text {
    white-space: nowrap;
}
于 2012-07-03T17:03:40.303 回答
0

您在代码中面临的问题之一是每个if块都将被评估；而且您只是在评估文本的长度是否大于给定数字，而不是评估长度是否介于给定的下限和上限之间。

为了确保if在给定条件匹配后停止评估 s 使用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");
        }
    });​

更新了 JS Fiddle 演示。

于 2012-07-03T17:03:29.123 回答