[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2013-01-24
3
Medium Priority
?
286 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:Tom Knowlton
3 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 1600 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 400 total points
ID: 38818779
Another way is:

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

Author Closing Comment

by:Tom Knowlton
ID: 38837545
Thank you.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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…
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…
Suggested Courses
Course of the Month20 days, 1 hour left to enroll

872 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