Using jQuery to calculate width of overflow text

Question

I have some divs which contain various amounts of text inside a container which has a fixed width. To stop the text from overflowing outside the container, I am using the following CSS:

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

Is there any way I can calculate the width of the text as it would be if it was not cut off? Using the following code only provides me with the width after it has been trimmed.

$('.boxText').width();

Just to clarify - I am talking about the width. Not the character length.

what does your html look like? I think it the text is contained within a p for example, it might be possible to calculate the width of the p — Huangism
– Huangism, Commented Jan 30, 2014 at 15:08
It's currently within a div tag, but I'll see if making it a p tag helps! — Dan Johnson
– Dan Johnson, Commented Jan 30, 2014 at 15:10
try the p tag inside the div tag. It might be more complicated than I thought but hope this helps jsfiddle.net/XD4kD — Huangism
– Huangism, Commented Jan 30, 2014 at 15:11
Why do you need to calculate the width of the text? It looks like you're trying to overcomplicate this a bit, I might be wrong but is it worth knowing the width of the text? — Leo
– Leo, Commented Jan 30, 2014 at 15:13
@Leo Yes. I'm creating some breadcrumbs which are all a fixed width but if the text is being clipped by the CSS, the width of the breadcrumb will increase to the width of the text on hover. — Dan Johnson
– Dan Johnson, Commented Jan 30, 2014 at 15:18

emil.c · Accepted Answer · 2014-01-30 15:26:36Z

3

var divWidthBefore = $('.boxText').width();
$('.boxText').css('width','auto');
var divWidth = $('.boxText').width();
$('.boxText').width(divWidthBefore);

answered Jan 30, 2014 at 15:26

emil.c

2,0282 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leo Over a year ago

+1 this is the easiest and obvious solution rather than hacking the width of the text

Dan Johnson Over a year ago

This does the job partly, however I need to use a CSS transition to change the initial width to the auto width, and CSS transitions don't like auto values! :(

Collectives™ on Stack Overflow

Using jQuery to calculate width of overflow text

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related