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 stackoverflow.com/questions/2057682/… — Oriesok Vlassky
– Oriesok Vlassky, Commented Apr 14, 2012 at 10:42
possible duplicate of how to get text width in pixel javascript or jquery? — Felix Kling
– Felix Kling, Commented Apr 14, 2012 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
– Ryan Walmsley, Commented Apr 14, 2012 at 10:44
spans 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
– Felix Kling, Commented Apr 14, 2012 at 10:46

Luca Filosofi · Accepted Answer · 2012-04-14 11:17:20Z

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, 2012 at 11:17

answered Apr 14, 2012 at 10:43

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

And the height gives the width of the last line?

beerbajay Over a year ago

OP wants to measure each line, not the entire element.

benweet · Accepted Answer · 2012-04-14 10:50:34Z

0

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

answered Apr 14, 2012 at 10:50

benweet

3,7231 gold badge24 silver badges26 bronze badges

Comments

gabitzish · Accepted Answer · 2012-04-14 10:53:46Z

0

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

answered Apr 14, 2012 at 10:53

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Comments

Vitalii Petrychuk · Accepted Answer · 2012-04-14 10:54:15Z

0

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

});

answered Apr 14, 2012 at 10:54

Vitalii Petrychuk

14.3k8 gold badges54 silver badges55 bronze badges

Comments

Yaron U. · Accepted Answer · 2012-04-14 10:58:58Z

0

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

answered Apr 14, 2012 at 10:58

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related