Get height, or width, of a div with overflow property and use that to set a limit on the scroll bar

This might be a simple question, but unfortunately I can't figure out how to do this.

Let's say I have a div with an overflow property, so that when I add some text to it that is bigger than its dimensions, a scroll bar appears to fit the text within it, as so...http://ift.tt/1xxLkM2

What I want to do is use plain javascript to get the new dimensions of the div with the scroll bar and use that to set a limit on how much text can be added to the div.

I'll try to illustrate this...

Let's say the limit on how much can be added to the div is 200px, meaning I want the scroll bar to remain static once the div reaches this size. So, for example, if the following text width is 250px:

Hello World Foo Bar

and the word Bar is 50px, I want only this text to appear within the div:

Hello World Foo

I tried using javascript to get the height and width of the div, but it does not take into consideration the overflow property. It only gets the height and width which I set the div to be initially.

I hope you all understand what I am trying to do, I'll re-edit if necessary.