Javascript: Detecting if text would wrap

Question

How can I detect if a piece of text would wrap?

So imagine I have a UI with a header that has largish text. I want the biggest text here that fits vertically in a menu bar. It displays numerical data like this:

LABEL: 9999   LABEL2: 99999

The number parts can get larger. On some screens - e.g. phones - it causes the element to overflow and wrap below the bar that it is supposed to stay in. I don't want to do overflow:hidden. I want the user to see the whole thing.

I'd like to be able to somehow calculate how big the element would be, and if it would wrap pre-emptively shrink the font, possibly move the element left to make space.

Answer 1

You can detect the difference between the different width properties of the containing element's width and scroll width if you set the white-space css handling to nowrap.

Here is a jsFiddle to demonstrate, and the code:

$(document).ready(function(){
    $("#messages").append($("#aa").width() + " " + $("#aa").outerWidth() + " " + $("#aa")[0].scrollWidth);
});

#aa {
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="aa">lksjdlakj dla ldakjl skajd lkasjlkdas dlaskdjl aksjd laksdj laks djlkas dlkasjd lkasjdl alkdj laksdj alsklkajlksjad lkajsld kasjldkasjd lkjlsk djlkasdj llaskjdl aksdjlaksjd lkasjdlak sdl</div>
<div id="messages"></div>

Once you know that the scroll width is wider than the width, you can then resize the text or do what you need to do until it isn't.