How to know text is breaking using javascript or jquery

Question

I have table in some colums text is breaking in two lines. I want to reduce font size for which td text is breaking. I am not getting any clue to where to start coding for this issue http://jsfiddle.net/WZNPx/

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>sdfasdfas asdfasf asdfsaf </td>
<td>adfafdafd adfasdf afasdf sdfsadfasasdfa sdf asdfsafd adfaf</td>
<td>adfasf</td>
</tr>
</table>

if i measure height then it will also count those td which has only one line text because height is similer of td in one table — Jitender, Feb 26 '13 at 11:52
[calculating text width with jQuery](http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery) — jantimon, Feb 26 '13 at 11:53

score 2 · Accepted Answer · answered Feb 26 '13 at 12:52

Please find Fiddle here: http://jsfiddle.net/WZNPx/7/

The code is fairly simple:

var tds = $("#test td")

for (var i = 0, l = tds.length; i < l; i++)
{
    var td = tds.eq(i);
    td.prepend("<span class='testerStart'></span>");
    td.append("<span class='testerEnd'></span>");
    var s = $(td).find(".testerStart").position().top;
    var e = $(td).find(".testerEnd").position().top;
    console.log(s,e);
    if (e > s) console.log("Multiple lines");
    else console.log("Single line");
}

The idea is to insert empty span at the beginning and at the end of the text and check if their y positions are different.

For some reason it doesn't work when the text ends with space.

How to know text is breaking using javascript or jquery

1 Answers1