I have a div element that covers the whole width of the window and a label inside of it. The label gets changed dynamically and sometimes the text inside it goes beyond the boundaries of the div. There is an example:
http://jsfiddle.net/VWNKC/ I tried with the:
white-space: nowrap
on both div and label but it just didn't work. I am just wondering if it is possible to shrink the text inside the label so it fits the width of the parent div.
You can see that the label goes beyond the div if you scroll and try to select something after the end of the blue background of the div. There is still content.
EDIT:
I am not trying to shrink the text but to show parts of its content, Lets say the beggining of the text. I am not trying to change the size of the font, I just want to show the part of the text that fits inside the div.
It seems you want the label to wrap inside the parent container? In that case white-space: nowrap will not work, that will just cause the label text to go beyond the parent container's boundary without wrapping to the next line.
So there are two ways you could do this, either have the text wrap to the next line so that the label remains within the width of the div, or have it gracefully truncate by using the following CSS Properties:
text-overflow: ellipsis;
overflow: hidden;