Solved

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

Posted on 2013-01-24
3
281 Views
Last Modified: 2013-01-30
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.
0
Comment
Question by:knowlton
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 400 total points
ID: 38816098
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
 
LVL 22

Assisted Solution

by:Mrunal
Mrunal earned 100 total points
ID: 38818779
Another way is:

$('span[id*="lblDetails"]').html().length
0
 
LVL 5

Author Closing Comment

by:knowlton
ID: 38837545
Thank you.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to make a moving character 3 68
tiny glitch in my main slider 3 38
jQuery dialog box help 2 17
Change to file doesn't show up 16 51
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question