substitute end of label with dots?

General
1

Is there a way to substitute a label with dots, before it gets hidden? - Whooho… Hard to describe in english…

Lets say I have a 200 pixel default, but resizable layout with an undefined-width label inside (because I want no line-break). The label should display a street name.

Example:

“Short Street” - Can be displayed fully - No Problem…
“Veeeeeeeery veeeery looooong street” - Will be hidden after 200 pixel - “Veeeeeeeery veeeer”

What I would like to have, is something like that:
"Veeeeeeeery vee
…
"

The user is able to see, that there is some hidden information. And can use a tooltip for example…

Is there any solution for that in vaadin?

Thank you very much,

Greetz from Germany

2

Hi,

Well, if you want dots - then you should probably play with the
text-overflow: ellipsis;
 CSS property (though AFAIK it is supported not that widely). If you just don’t want the line break - try
overflow: hidden;
 and
white-space: nowrap;

cheers,
sasha

3

Or in java :


BufferedImage bufferedImage = new BufferedImage(1, 1, BufferedImage.TYPE_4BYTE_ABGR_PRE);
Font myFont = new Font("Verdana", Font.PLAIN, 12);
String myLabel = "Where is my Umbrella ?";
Graphics graphics = bufferedImage.getGraphics();
FontMetrics metrics = graphics.getFontMetrics(myFont);
int width = metrics.charsWidth(myLabel.toCharArray(), 0, myLabel.length());
if (width > 200)
{
	// Processing
}
4

Great! Works in Chrome, IE8 and 9, and FF 8… That’s enough for me!

Thank you very much!

5

If someone is interested - You have to use a lot of vendor-specific-css-rules. This is working: