Way to figure out actual size of the text that went outside of the button in DOM

Question

I would like to automatically go through several screen sizes and check if the button size is too small for the text inside if it so the text goes outside of the button. So far i get only a size of the button itself. Is there any way i can get actual size of the text on the page?

If you're familiar with jQuery, here's a solution: http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery — Reinder Wit, Feb 18 '16 at 14:40
@Mr.White while that may work, jQuery isn't tagged, so let's assume OP is looking for a JS solution please. — Sterling Archer, Feb 18 '16 at 14:41
http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript — jtrumbull, Feb 18 '16 at 14:46
compare the scroll-dimensions (scrollWidth, scrollHeight) to the offset-dimensions. If scroll exceeds offset, your content takes more space than the container. — Thomas, Feb 18 '16 at 14:57
@Thomas scroll vs offset works perfect for me. Thanks a lot. Can you make it as an answer and i will mark it so? — Fancy Pants, Feb 18 '16 at 15:08

score 0 · Accepted Answer · answered Feb 18 '16 at 17:54

compare the scroll-dimensions (scrollWidth, scrollHeight) to the offset-dimensions. If scroll exceeds offset, your content takes more space than the container.

function isOverflowing(node){
    return node.scrollWidth > node.offsetWidth || node.scrollHeight > node.offsetHeight
}

Way to figure out actual size of the text that went outside of the button in DOM

1 Answers1