Question

我已经构建了这个不那么伟大的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的宽度与字符数完全成比例？

谢谢！

Answer 1

试试这个：

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

Answer 2

您在代码中遇到的一个问题是每个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

在jquery中按比例计算div内部文本的宽度？

2 个答案: