Getting required width of an overflowing span in JS

Question

<div id="wrapper" style="width:50px; overflow:hidden;">
  <span id="innerPart" style="white-space: nowrap; width: auto;">Lorem ipsum...</span>
</div>

Hello interwebs, I'm trying to get the width the innerPart would require to be fully displayed via JS. Tried using document.getElementById("innerPart").width; but it is just returning null

try giving `css:inline-block` to that span and check, Comment here if u r not getting width after trying dis — Khaleel, Sep 03 '14 at 16:23
isn't working. I realised that '.getAttribute("width")' is the wrong function to use. But the '.width' is also null. — lukaszett, Sep 03 '14 at 16:33

score 0 · Answer 1 · edited May 23 '17 at 12:29

Use document.getElementById("innerPart").offsetWidth

See this answer

If you wanted the width property it's off the style property. E.g. document.getElementById("innerPart").style.width

The difference being that offsetWidth is a computed property, it takes into account borders and padding whereas width doesn't. You may find that width is null and I'm assuming that is true if the width hasn't been specifically set by you.

Getting required width of an overflowing span in JS

1 Answers1