How to calculate width of an line of text in Jquery?

Question

I am trying to figure out how to calculate just the width of one line of text with jquery.

I have the following text in an string

"Line 1

Line 2

Line 3

Line 4 Blah

Line 5"

When testing to find the width of the text which is shown on the page it always shows 77 px from where line 4 is the longest.

The text is put in using Jquery command .append() on the element id #text

the code used for the element is

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

How would I calculate just the width of Line 5?

Thanks - Ryan

perhaps this could help you as well http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery — Oriesok Vlassky, Apr 14 '12 at 10:42
or this http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery — Oriesok Vlassky, Apr 14 '12 at 10:43
possible duplicate of [how to get text width in pixel javascript or jquery?](http://stackoverflow.com/questions/9782687/how-to-get-text-width-in-pixel-javascript-or-jquery) — Felix Kling, Apr 14 '12 at 10:43
I'm already wrapping an selection of text in an span element to do it but I don't think how i'm trying to do the text will work with multiple spans. — Ryan Walmsley, Apr 14 '12 at 10:44
`span`s are inline elements, then don't influence the text flow. If you do it correctly, it will work. Since you are not showing how you are doing it, we cannot help you with that. — Felix Kling, Apr 14 '12 at 10:46

Luca Filosofi · Accepted Answer · 2012-04-14T11:17:20.693

2

demo: 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>

NOTE: the trick here is to use css white-space:pre to mantain the real height and pre style

edited Apr 14 '12 at 11:17

answered Apr 14 '12 at 10:43

Luca Filosofi

30,905
9
70
77

And the height gives the width of the last line? – Felix Kling Apr 14 '12 at 10:44
OP wants to measure each line, not the entire element. – beerbajay Apr 14 '12 at 10:44

score 0 · Answer 2 · answered Apr 14 '12 at 10:50

0

Put the strings in multiple div elements and use .width() on the 5th.

answered Apr 14 '12 at 10:50

benweet

3,685
1
21
26

score 0 · Answer 3 · answered Apr 14 '12 at 10:53

You can append your text to a div with width:auto, and take that div's width.

something like this:

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

var widthOfText = auxDiv.width();
auxDiv.remove();

score 0 · Answer 4 · answered Apr 14 '12 at 10:54

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();

});

score 0 · Answer 5 · answered Apr 14 '12 at 10:58

0

no need of jquery... tou can just use the offsetWidth property of the element in the DOM

answered Apr 14 '12 at 10:58

Yaron U.

7,681
3
31
45

How to calculate width of an line of text in Jquery?

5 Answers5