Question

我试图找出如何用jquery计算一行文本的宽度。

我在字符串中有以下文字

“第1行

第2行

第3行

Line 4 Blah

第5行“

当测试找到页面上显示的文本宽度时，它总是显示77 px，其中第4行是最长的。

在元素id #text

上使用Jquery命令.append（）放入文本

用于元素的代码是

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

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

谢谢 - 瑞恩

Answer 1

演示： http://jsbin.com/otaquf/5

$(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>

注意：这里的诀窍就是使用css white-space:pre来保持真实的高度和预设风格

Answer 2

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

Answer 3

您可以将文字附加到宽度为：div的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();

Answer 4

<强> HTML：

<style>.temp{display:none}</style>
<pre class="preview"></pre>
<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();

});

Answer 5

不需要jquery ... tou只需使用DOM中元素的offsetWidth属性

如何计算Jquery中一行文本的宽度？

5 个答案: