1

jqueryを使用して1行のテキストの幅だけを計算する方法を理解しようとしています。

文字列に次のテキストがあります

"ライン1

2行目

3行目

4行目ブラ

5行目"

ページに表示されるテキストの幅を見つけるためにテストすると、4行目が最も長いところから常に77ピクセルが表示されます。

テキストは、要素ID #textでJqueryコマンド.append（）を使用して入力されます

要素に使用されるコードは

<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>
  • 注：ここでの秘訣は、cssを使用white-space:preして実際の高さとプレスタイルを維持することです
于 2012-04-14T10:43:44.363 に答える
0

文字列を複数のdiv要素に配置し、5日に.width（）を使用します。

于 2012-04-14T10:50:34.807 に答える
0

width：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の必要はありません...touoffsetWidthはDOMの要素のプロパティを使用できます

于 2012-04-14T10:58:58.830 に答える