length of text inside a span - and handle long text gracefully

How do I find the length of the text inside of a <span> tag?


I tried:

alert($('span[id*="lblDetails"]').length);

and it said "2" and I know that is not correct.


Essentially, what I want to do is if the text inside the span is greater than a certain length, I want to put "..." and then when they hover over the truncated text I want to show a popup  bubble of some sort that shows the full text.
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
alert($('span[id*="lblDetails"]').length); // display how mayn object jQUery found the provided selector : span[id*="lblDetails"]
If you get 2, that mean you've two objects...

To display the length if there's only ONE :
$('span[id*="lblDetails"]').text().length

Open in new window

To display the length if there's MORE THAN ONE (your current case) :
var total = 0;
$('span[id*="lblDetails"]').each(function() {
     var text = $(this).text();
     alert( "text is " + text );
     alert( "text length " + text.length );
     total = total + text.length;
     alert( "total is " + total );
})
alert( "last total is " + total )

Open in new window

0
 
MrunalConnect With a Mentor Commented:
Another way is:

$('span[id*="lblDetails"]').html().length
0
 
Tom KnowltonWeb developerAuthor Commented:
Thank you.
0
All Courses

From novice to tech pro — start learning today.