1

我想弄清楚如何用 jquery 计算一行文本的宽度。

我在字符串中有以下文本

“1号线

2号线

3号线

4号线废话

5号线"

在测试以查找页面上显示的文本的宽度时，它始终显示 77 px，其中第 4 行是最长的。

使用 Jquery 命令 .append() 将文本放入元素 id #text

用于元素的代码是

<div id = 'terminal'><pre><span id = 'text'></span></pre>

我将如何计算第 5 行的宽度？

谢谢 - 瑞安

4

5 回答 5

2 
$(function(){
  var text =  $.trim($('#demo').text());
  // this may vary browser to browser...
  var text_w_no_empty_lines = text.replace(/[\r\n]+/g, '\n');
  var lines = text_w_no_empty_lines.split('\n');
  // line number you want  total - 1
  var line_5 = lines[4];
  // .tick { white-space:nowrap;display:inline-block;display:none }
  alert( $('<p class="tick">').html(line_5).appendTo('body').width() )
});

        <p id="demo" style="white-space:pre">
        Line 1

        Line 2

        Line 3

        Line 4 Blah

        Line 5
        </p>
  • 注意：这里的技巧是使用 csswhite-space:pre来保持真实的高度和预样式
于 2012-04-14T10:43:44.363 回答
0

将字符串放在多个 div 元素中，并在 5 日使用 .width()。

于 2012-04-14T10:50:34.807 回答
0

您可以将文本附加到具有宽度：auto 的 div，并采用该 div 的宽度。

像这样的东西：

var auxDiv = $("<div>").css({width : "auto"}).appendTo($("body")).html("<div id = 'terminal'><pre><span id = 'text'></span></pre>");

var widthOfText = auxDiv.width();
auxDiv.remove();
于 2012-04-14T10:53:46.630 回答
0

HTML：

<style>.temp{display:none}</style>
​&lt;pre class="preview"></pre>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
​&lt;span class="temp"></span>

JS：

$(document).ready(function(){

    var string = 'line 1\nline 2 ... \nline 3..',
        lines = string.split('\n'),
        $temp = $('.temp').show();

    $('.preview').html(string);

    $.each(lines, function(key, str) {
        console.log(key + ': ' + $temp.html(str).width())
    })
    $temp.hide();

});
于 2012-04-14T10:54:15.817 回答
0

不需要jquery ...你可以只使用offsetWidthDOM中元素的属性

于 2012-04-14T10:58:58.830 回答