WebLabel to not wrap if too long

Is there a way to force a web label not to “wrap” at the last space and just truncate?


You could use executeJavascript method to pass in some custom CSS on the control. I’m not very familiar with what properties you would need to change, but if you’re using Chrome - just inspect the element and play live with the CSS until you find something that works. Someone else on here might know the exact css styles to use.

I dont think you would need to use JS, could all be done using CSS. I would create a style in Xojo and in the HTML header for the app tweak the CSS to not wrap. Remember to use the “!important” option on the style changes to ensure you override Xojos setting for the style.

You would need to specify in the style the specific width and height I seem to remember and then use the “text-overflow” facility. You might want to check the W3 link below.


Thanks for the replies. I’ve read about modifying the HTML header in Xojo, but I’m not sure what that looks like. Can you give me some Xojo code? Also, when you said create a style for Xojo, would there be anything unique in it to aid in the truncating, or just a normal style that specifies how I want the text to show? Thanks for all the help.

Just create a web style how you want it (within the options available in Xojo itself).

For the sake of example below I will use “styDontTruncate” as the style. Remember to set your Web Label to a specific width and height and I think you will have to set it not to be multi-line to work. For the example I am going to assume the width is 500px, I have a feeling you dont need to worry about the height.

In the HTML Header section I would add something like this:


.styDontTruncate P, .styDontTruncate DIV, .styDontTruncate SPAN { width: 500px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } [/code]

I am doing this off the top of my head and havent tested it but the concept should be right.

Just turn off the multiline property. That will prevent the wrap.

Greg that doesnt really work as you would expect because it just chops wherever the line is. Let me give you an example, if we used a big font say 50pt you will see that if the letter is half way across the right part of the width then the browser will only show half of that letter whereas if you use the CSS and overflow then it gets truncated at the start of the letter so is much cleaner and if you use the ellipse then you get the “…” appended automatically.