0

I have a division with a label as below in code, and I would like to know the complete width of the label by javascript, but the label seems to collapse automatically to fit within the division. So if I measure the label width, it is the 100px of the division.

<div style="width: 100px; overflow: hidden; background-color: lime;">
    <label id="getMyWidthLabel" style="background-color: cyan;">
        Some text which is longer than the div's 100 pixels.
    </label>
</div>

Now if I would place an width on the label like style="width: 200px", I get the preferenced look (no collapsion, but the label is not measurable anymore.

What css or javascript do i need and why?

EDIT: I would like to measure the width of the label as seen here:

enter image description here

But because it stands in a division, it automatically breaks and I can't measure the full width anymore:

enter image description here

Liontack Lightning
  • 83
  • 1
  • 8

1 Answers1

3

You should add white-space: nowrap to allow the content to overflow outside of the parent element.

<div style="width: 100px; overflow: hidden; white-space: nowrap;">
    <label id="getMyWidthLabel" class="lb">
        Some text which is longer than the div's 100 pixels.
    </label>
</div>

fiddle: http://jsfiddle.net/0qdzd9do/

Joe Sager
  • 787
  • 4
  • 9
  • 1
    If that is what the OP actually wants +1. This works too- http://jsfiddle.net/arw97nyj/1/ – Paulie_D Jan 21 '15 at 16:38
  • 1
    Well OP had `overflow: hidden`, so I thought they might want it hidden haha. But if not you can just remove it, no overflow attribute is required if the text should be visible – Joe Sager Jan 21 '15 at 16:45
  • Thanks Joe Sager, this is exactly what I needed to find. And indeed I wanted to have it hidden, but also without wrap. +1. Since it looks like the white-space on the div works on it's children, I will use it in the div. – Liontack Lightning Jan 21 '15 at 17:33