CODEWITHSUNDEEP
javascriptjquery
Jitender
Jitender

Reputation: 7969

How to know text is breaking using javascript or jquery

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>

Upvotes: 3

Views: 100

Answers (1)

strah
strah

Reputation: 6732

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.

Upvotes: 2

Related Questions